用標簽“ multiple”修改輸入元素的行為

Question

我有一個表格，希望用戶上傳多張照片。 通常，當我一次選擇多個文件時，效果很好。 但是問題在於，如果用戶要一個接一個地添加圖像，則每次添加后，先前的文件都會被刪除（因為每次添加后的文件長度為1）。 我該如何解決？ 謝謝

 $("#files").change(function(){ console.log("the length of files: ", $("#files")[0].files.length); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="file" name="" id="files" multiple> </form> 

Answer 1

您遇到的問題是<input>標記在這里“原子地”起作用。 無論選擇什么，都可以選擇。 如果您以后想要添加其他元素，則必須使用插件（如建議的那樣）或自己處理。

let allFiles = [];
$('#files').change(function() {
  this.allFiles = this.allFiles.concat($("#files")[0].files);
  showFileNames();
});

請注意我怎么說文件是“串聯”到allFiles變量的。

另外， showFileNames函數可以呈現所有文件，或者例如僅將文件名呈現到表或列表等中。 並且對於每個文件，您可能還會有一個“ x”來刪除它。

現在，當您稍后提交表單時，可以直接使用allFiles代替該輸入，例如，自己構建FormData。

Answer 2

您可以保留一個文件數組，並將每個文件添加到該數組。 這樣，您將擁有所有添加文件的運行總計。 當前方法的問題在於，每次上傳時文件都會被覆蓋，因此，將它們保存到數組是解決此問題的一種方法。

請參見下面的工作示例：

 let uploaded_files = []; $("#files").change(function(){ let currentFiles = $("#files")[0].files; uploaded_files = [...uploaded_files, ...currentFiles]; console.log(uploaded_files.length); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="file" name="" id="files" multiple> </form>