1

Не могу понять как и File Reader удалить выбранное , не могу извлечь массив

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener("load", function() {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild(image);
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
$('#delete').bind("click", function() {




  //Проблема тут

  $('#preview').hide(); // Удаляем превью
  $('#preview').replaceWith($('#photo').clone());


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview"></div>
<br>
<input type="file" class="photo" id="browse" name="photo" onchange="previewFiles()" multiple/>

<div id="delete">delete</div>

6
  • изменил код, или вы имеете виду писать отдельно функцию которая у ищет массив и удаляет превью
    – Koly
    24 янв 2017 в 14:42
  • этот вопрос был, не могу найти
    – L. Vadim
    24 янв 2017 в 14:46
  • найдите просто все просмотрел нет нигде
    – Koly
    24 янв 2017 в 14:46
  • непонятно что именно надо удалить и какой массив куда извлечь. Чем не нравится текущее решение?
    – Grundy
    24 янв 2017 в 14:47
  • решение удаляет сразу все изображения а если пользователь загрузил 5 изображений а удалит хочет 2 и 3
    – Koly
    24 янв 2017 в 14:51

1 ответ 1

1

Список загружаемых файлов нельзя изменить из javaScript. FileList доступен только для чтения. Операции с локальными файлами сильно ограничены в целях безопасности.

Поэтому, вам нужно создать отдельный массив, в который вы сможете складывать файлы из FileList.

var filestoupload = [];
function previewFiles() {

  var preview = document.querySelector('#preview');
  var files = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener("load", function() {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        filestoupload.push(this.result)
        var div= document.createElement('div');
        var divdel= document.createElement('div');
        divdel.className='delete'
        divdel.innerHTML='delete'
        div.className='fileprew'
        div.appendChild(divdel);
        div.appendChild(image);
        preview.appendChild(div);
        console.log('files to upload: ', filestoupload.length)
        
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
    
  }

}
$('body').on("click", ".delete", function() {
  
  index=$(this).index();
  console.log('удаляем файл: ',index)
  filestoupload.splice(index, 1);
  $(this).parent().remove();
  console.log('files to upload: ', filestoupload.length)

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview"></div>
<br>
<input type="file" class="photo" id="browse" name="photo" onchange="previewFiles()" multiple/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.