1

I read all the material but couldn't find the answer. I want remove a file from input file(multiple) by index in jquery . This is my code.But I could not write a function to delete the index file. I need the file deletion function by index. 

$("#file").change(function () {
 
  
 //Get count of selected files
 var countFiles = $(this)[0].files.length;

 var imgPath = $(this)[0].value;
 var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
 var image_holder = $("#image-holder");
if(countFiles<=10){
 if (extn == "png" || extn == "jpg" || extn == "jpeg") {
     if (typeof (FileReader) != "undefined") {

         //loop for each file selected for uploaded.
         for (var i = 0; i < countFiles; i++) {

             var reader = new FileReader();
             reader.onload = function (e) {
                 $(image_holder).append("<div class='col-md-2'>  <div class='card bg-dark text-white o-hidden mb-4'> <img class='card-img' src='"+e.target.result+"' style='width:100px;height:100px' alt='Card image'> <button class='btn btn-danger' onclick='file_remove('"+i+"')'>remove</button> </div> </div>");
                
             }

             image_holder.show();
             reader.readAsDataURL($(this)[0].files[i]);
         }

     } else {
         alert("This browser does not support FileReader.");
     }
 } else {
     alert("Pls select only images");
 }}
});
ho3ein
  • 11
  • 4
  • 1
    Show your code attempt. If you don't show that you at least tried something yourself you might not get an answer. – Ivan86 Dec 10 '19 at 03:20
  • @Ivan86 I updated my question.Please look at it again. – ho3ein Dec 10 '19 at 03:26
  • 1
    If the client uploads a file to their Browser, it's their Browser, so it will attempt to get that file onchange. You cannot remove it from their list, just deny using it based on conditions. – StackSlave Dec 10 '19 at 03:36
  • @StackSlave I want the client when click on remove button,file remove from input ,I saw a lot of this. – ho3ein Dec 10 '19 at 03:40
  • Even though it's [actually now possible](https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a/47172409?r=SearchResults&s=1|76.9897#47172409) to do this in newest browsers, just go the Array way, far easier/stable. – Kaiido Dec 10 '19 at 06:51
  • You can make your own custom file list with an Element like `
      `, without attaching the file input to your document using `var fileInput = $(""); fileInput.change(function(){ for(var i=0,files=this.files,path,file,l=files.length; i
     – StackSlave Dec 11 '19 at 00:38

1 Answers1

0

You can try to push all of the selected items to an array using Array.from method. Then trying to remove some item using .splice() method, like this:

$('[type=file]').on('change', function () {
  // after selecting some files, we will push all of them to an array
  var files = Array.from(this.files);
  
  console.log('file count:', files.length);
  
  if (files.length > 1) {
    // trying to delete/remove some item
    files.splice(1,1);
  
    console.log('file count:', files.length);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple />

Since you update the question, in this case, you can edit to:

("#file").change(function () {
    var files = Array.from(this.files);

    // now you can delete/remove some item with the array...

    // inside the loop, you can access the length via
    for (var i = 0; i < files.length; i++) {
        // code goes here...
    }
});
Tân
  • 1
  • 15
  • 56
  • 102