I can not understand how to delete the selected File Reader, I can not extract the array

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>

  • changed the code, or do you have a mind to write a separate function that looks for an array and deletes the preview - Koly
  • This question was, I can not find - L. Vadim
  • just find everything looked nowhere - Koly
  • it is not clear what exactly should be removed and which array to extract. What does not like the current decision? - Grundy
  • the solution deletes all the images at once, but if the user has uploaded 5 images and wants to delete 2 and 3 - Koly

1 answer 1

The list of downloadable files cannot be changed from javaScript. FileList is read only. Operations with local files are severely limited for security reasons.

Therefore, you need to create a separate array in which you can add files from 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/>