如何使用JavaScript添加到現有的FileList對象？

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
}

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);