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

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" 元素。 请参阅How to set File objects and length property at FileList object where the files are also reflected at FormData object?。 File 对象应由用户选择。可以从multipleFile 选择返回的FileList 中选择单个或多个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。

另见input file to array javascript/jquery、Trigger click on input=file on asynchronous ajax done()、Simulate drop file event