如何上传之前追加输入类型的文件多个文件 [英] how to append files in input type file multiple before uploading

问题描述

我想问问怎么当用户选择图像追加输入类型的文件多个文件超过一次上传例如我选择2图像和我再次选择3张图片上传前，前两次被免去第二次之前，输入类型的文件和最后3图像仍然存在，我知道它的输入类型的文件，它取代了新的文件，新选定的默认行为，但我想保留的所有文件的用户上传前选择多次怎么可能我是使用Ajax和FORMDATA，但它不能正常工作，请帮助我。 谢谢

I want to ask how to append files in input type file multiple when a user selects images more than one time before uploading for example i selects 2 images and again i select 3 images second time before upload, the first two gets removed from input type file and last 3 images are still there i know its a default behavior of input type file that it replaces the new files with new selected ones but i want to keep all the files user selects multiple times before upload how is it possible i am using ajax and formdata but it is not working please help me. Thanks

推荐答案

我有你这样的脸同样的问题

I have face same problem like you

有关，现在我已经找到解决方案

now i have found solution for that

 <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>

这是工作在我的网页妥善我想这也是对你也有用

this is working in my page properly i wish this is also be useful for you also

这篇关于如何上传之前追加输入类型的文件多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！