Question

当我从对话框中选择要上传的每个文件时，我已成功使用AJAX完成上传代码。因此，每个上传都有自己的表单和输入文件（上传按钮），如下所示。当前代码按顺序上传文件，因为用户可以选择多张照片但不能一起＆amp;我在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

因为我想像以前一样恢复上传？它不能与我合作，我读到更新输入文件存在安全问题，但我需要分配用户选择的内容，而不是路径。

我不想使用带有AJAX的FromData，因为这会导致我的所有代码都发生变化，而且它与我的代码等所有浏览器都不兼容。

非常感谢你的帮助！

Answer 1

~~无法使用File将input type="file"对象分配给javascript元素。~~请参阅How to set File objects and length property at FileList object where the files are also reflected at FormData object?。用户应选择File对象。可以从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。

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

Answer 2

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" />

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

2 个答案: