將多個圖像（文件）從一個文件輸入分配到另一個文件輸入 - 上傳

Question

當我從對話框中選擇要上傳的每個文件時，我已經成功上傳了使用 AJAX 完美運行的代碼。 所以每個上傳都有自己的表單和輸入文件（上傳按鈕），如下所示。 當前代碼按順序上傳文件，因為用戶可以選擇多張照片但不能選擇在一起，我在 Javascript 中使用帶有 setTimeout 的排隊算法來檢查第一次上傳是否完成以開始第二次上傳、第三次上傳，依此類推。

<form id="form1">
    <input type="file" id="userfile1" name="userfile[]" multiple/>
</form>

<form id="form2">
    <input type="file" id="userfile2" name="userfile[]" multiple/>
</form>
.
.
.

現在的問題是，當我選擇要上傳的多個圖像（假設使用 Ctrl 將兩個圖像放在一起）時，使用第一個輸入文件，我將它們放入這個數組中：

document.getElementById('userfile1').files; 

那么現在，如何將選擇的第二個圖像分配給第二個輸入文件

userfile2

因為我想像以前一樣恢復上傳？ 它對我不起作用，我讀到更新輸入文件存在安全問題，但我需要分配用戶選擇的內容，而不是路徑。

我不想將 FromData 與 AJAX 一起使用，因為這會導致更改我的所有代碼，而且它與我的代碼等所有瀏覽器都不兼容。

非常感謝你的幫助！

Answer 1

無法使用javascript將File對象分配給input type="file"元素。 請參閱如何在 FileList 對象中設置 File 對象和長度屬性，其中文件也反映在 FormData 對象中？ . File對象應由用戶選擇。 可以從multiple File選擇返回的FileList選擇單個或multiple File對象，並將所選文件作為單獨的進程發送到服務器

 document.querySelector("input[name=files]") .addEventListener("change", function(event) { var files = Array.prototype.slice.call(event.target.files), filtered = []; for (var i = 0; i < files.length; i++) { if (i > 0) filtered.push(files[i]) }; if (filtered.length) { console.log(files, filtered); filtered.forEach(function(file) { // do stuff }) } })

 <input name="files" type="file" accept="image/*" multiple="true" />

---

現在的問題是，當我選擇要上傳的多個圖像（假設使用 Ctrl 將兩個圖像放在一起）時，使用第一個輸入文件，我將它們放入這個數組中

請注意，被選擇的多個文件返回的FileList對象不是Array 。

另請參閱輸入文件到數組 javascript/jquery ， 在異步 ajax done() 上觸發 input=file 上的單擊， 模擬放置文件事件