Question

我选择2张图片并再次在上传前第二次选择3张图片，前两张图片从输入类型文件中删除，最后3张图片仍在那里。我知道这是输入类型文件的默认行为，它用新选择的文件替换新文件，但我想保留用户在上传之前多次选择的所有文件。这怎么可能？我正在使用ajax和formdata。

Answer 1

我遇到了和你一样的问题

现在我找到了解决方案

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

这正在我的页面中正常工作我希望这也对你有用

Answer 2

正确的方法是使用 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min"> <option value="">Min</option> <option value="-1">Last Year Student</option> <option value="0">Fresher</option> <option value="0.6" >0.6</option> <option value="1">1</option> <option value="1.6" >1.6</option> <option value="2">2</option> <option value="2.6">2.6</option> <option value="3">3</option> <option value="3.6">3.6</option> <option value="4">4</option> <option value="4.6">4.6</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12+</option> </select> <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max" disabled> <option value="">Max</option> <option value="1">1</option> <option value="1.6">1.6</option> <option value="2">2</option> <option value="2.6">2.6</option> <option value="3">3</option> <option value="3.6">3.6</option> <option value="4">4</option> <option value="4.6">4.6</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12+</option> </select>除了$("input[name=replyfiles]").clone().appendTo( $("input[name=replyfiles]").parent() ).val(''); $("input[name=replyfiles]").hide();。

如何在上传之前在多个输入类型文件中附加文件

2 个答案: