Question

我想问一个关于<input type="file" multiple>的问题。例如，用户一次选择3个图像，如果他希望在上传之前选择另外2个图像以添加最后3个图像，但是当用户在上载之前选择最后2个图像时不会发生这3个图像从文件中删除列表和用户上传图像时，只会上传最后2张图片，为什么会这样。请帮我。如何解决这个问题呢。

Answer 1

这是html文件输入标记的默认行为。它将在每次选择时每次替换先前选择的文件。您可以将formdata用于html并将文件存储到浏览的.onchange事件中的表单数据

Answer 2

我遇到了和你一样的问题

现在我找到了解决方案

 <input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput-->
 <div id="#filelist"></div>
 <script>
    var selDiv = "";
    var storedFiles = []; //store the object of the all files

    document.addEventListener("DOMContentLoaded", init, false); 

    function init() {
       //To add the change listener on over file element
       document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false);
       //allocate division where you want to print file name
       selDiv = document.querySelector("#filelist");
    }

    //function to handle the file select listenere
    function handleFileSelect(e) {
       //to check that even single file is selected or not
       if(!e.target.files) return;      

       //for clear the value of the selDiv
       selDiv.innerHTML = "";

       //get the array of file object in files variable
       var files = e.target.files;
       var filesArr = Array.prototype.slice.call(files);

       //print if any file is selected previosly 
       for(var i=0;i<storedFiles.length;i++)
       {
           selDiv.innerHTML += "<div class='filename'> <span> " + storedFiles[i].name + "</span></div>";
       }
       filesArr.forEach(function(f) {
           //add new selected files into the array list
           storedFiles.push(f);
           //print new selected files into the given division
           selDiv.innerHTML += "<div class='filename'> <span> " + f.name + "</span></div>";
       });

       //store the array of file in our element this is send to other page by form submit
       $("input[name=replyfiles]").val(storedFiles);
 }
 </script>

html-输入类型=＆＃34;文件＆＃34;多

2 个答案: