javascript - 如何在页面上多次使用 FileReader.onload？

Question

我有一个页面有多个用于单个文件上传的输入。有点像这样:

<div id="fileUpload1">
    <input id="inputField1" type="file"></input>
</div>
<div id="fileUpload2">
    <input id="inputField2" type="file"></input>
</div>
<div id="fileUpload3">
    <input id="inputField3" type="file"></input>
</div>
<button type="button" onclick="uploadFiles()">Upload</button>

在 uploadFiles() 中，我首先在输入字段中为每个文件创建一个数组:

var files = [];
for (var i = 1; i <= 3; i++) {
    var element = document.getElementById("inputField" + i);
    var file = element.files[0];
    files.push(file);
}

然后我尝试为"file"数组中的每个文件调用 FileReader 的 onLoad 事件:

for (var i = 0, f; f= files[i]; i++) {
    var fileName = f.name;
    console.log("out: " + fileName);
    var reader = new FileReader();
    reader.onload = function (e) {
        console.log("in: " + fileName);
        addItem(e.target.result, fileName);
    }
    reader.readAsArrayBuffer(f);
}

addItem() 是一个有效的函数。

当我运行它时，仅上传"file"数组中的最后一项。

如果 inputField1 有一个名为 file1.jpg 的文件，inputField2 有一个名为 file2.jpg 的文件，等等，我会在控制台中得到以下信息:

out: file1.jpg
out: file2.jpg
out: file3.jpg
in: file3.jpg
in: file3.jpg
in: file3.jpg

我觉得我缺少一些关于如何使用 FileReader 的真正基础知识。任何帮助，将不胜感激。谢谢!

Answer 1

<button type="button" onclick="uploadFiles(readF)">Upload</button>

function uploadFiles(){
    var files = [];
    for (var i = 1; i <= 3; i++) {
        var element = document.getElementById("inputField" + i);
        var file = element.files[0];
        files.push(file);
    }
    for (var i = 0, f; f= files[i]; i++) {
        console.log("out: " + fileName);
        readF(f);
    }
}
function readF(f){
    var reader = new FileReader();
    reader.onload = function (e) {
        var fileName = f.name;
        console.log("in: " + fileName);
        addItem(e.target.result, fileName);
    }
    reader.readAsArrayBuffer(f);
}