html-input type =「file」multiple

Question

我想問一個關於<input type="file" multiple>的問題。例如，用戶一次選擇3個圖像，並且如果他希望在上載之前選擇另外2個圖像以添加最後3個圖像，但是當用戶在上載之前選擇最後2個圖像時不會發生，前3個圖像從文件中被移除列表，當用戶只上傳圖片時，最後2張圖片將被上傳，爲什麼會發生這種情況。請幫幫我。如何解決這個問題呢。

Answer 1

這是html文件輸入標籤的默認行爲。它會在每次選擇時替換之前選擇的文件。要麼你可以使用FORMDATA到HTML和存儲文件到表單數據上瀏覽

Answer 2

的.onchange事件我有面子同樣的問題，像你

現在我已經找到了那個

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

解決方案