javascript - 将多个图像(文件)从一个文件输入分配到另一个文件输入 - 上传

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 对象应由用户选择。可以从多个 File 选择返回的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" />

<小时/>

The problem now, when I select multiple images to upload (let's say two images together using Ctrl), using the first input file, I get them in this array

注意，FileList选择的多个文件返回的对象不是 Array 。

另请参阅input file to array javascript/jquery , Trigger click on input=file on asynchronous ajax done() , Simulate drop file event