将多个图像（文件）从一个文件输入分配到另一个文件输入 - 上传

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 上的单击， 模拟放置文件事件