如何使用JavaScript向现有的dataTransfer.files对象添加内容？

Question

我正在创建一个拖放文件上传区域。当我一次上传多个文件时，它可以工作，但我需要它能够支持分阶段上传。我知道下面的问题在于每次设置文件，但我无法找到正确的方法来让更多文件每次被调用该方法时添加到dFiles中。

    var dFiles;
    //var dFiles = []
    var holder = document.getElementById('holder');
    holder.ondrop = function (e) {
        e.preventDefault();
        dFiles = (e.dataTransfer.files);
        //dFiles.push(e.dataTransfer.files);
   }

我尝试将dfiles初始化为空数组并添加文件（上面已注释）。后来，当我读取文件数据时，这导致了数据类型不匹配错误。

for (var i = 0; i < dFiles.length; i++) {
    reader = new FileReader();
    reader.readAsDataUrl(dFiles[i]); //error
}

- cooper

---

为什么不创建一个包含不同dFiles的数组？（每个拖放操作都会创建一个不同的dFile变量） 这样你就不需要尝试将不同的dFiles连接在一起了。 - Sylvain

现在我想起来了，你应该使用 dFiles.concat 而不是 dFiles.push，因为 dFiles 已经是一个数组了。 - Sylvain

Answer 1

e.dataTransfer.files 是一个文件列表。

您需要分别将每个文件添加到 dFiles 中：

var files = e.dataTransfer.files;

for (var i = 0, l = files.length; i < l; i++) {
    dFiles.push(files[i]);
}

或者使用ES6的方式：

dFiles.push(...e.dataTransfer.files);

- Andreas

---

为什么不使用连接符？ - Sylvain

@Sylvain（至少对于Chrome / Webkit），规范中的步骤[7b]（http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.concat）似乎返回`false`，因为`.concat()`将`FileList`作为对象添加而不是单独的文件。 - Andreas

这导致出现“Uncaught TypeError: inputFileElement.files.push不是一个函数”的错误，而MDN也没有描述push方法。 - Marc Wittke

@MarcWittke 我不太确定你在说什么，因为我的答案并没有试图改变文件输入元素的只读 FileList 属性 O.o dFiles 是一个数组（检查一下问题）。 - Andreas

@Andreas，哦，你说得对。标题非常误导人，因为@cooper实际上想要将某些内容添加到数组中，而不是FileList对象中。 - Marc Wittke