Javascript 如何在一个页面上多次使用FileReader.onload？

我有一个页面，有多个单一文件上传输入。有点像这样：

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

addItem（）是一个有效的函数

运行此操作时，仅上载“文件”数组中的最后一项

如果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方面缺少了一些真正基本的东西。任何帮助都将不胜感激。谢谢大家!

上传
<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);
}

函数uploadFiles（）{
var文件=[]；
对于（var i=1；i来说，问题似乎出在“var fileName=f.name；”在onload之外。我认为e.target.result在原始示例中应该是正确的。输出也将取决于事物的执行顺序。如果浏览器在readAsArrayBuffer之后直接调用每个onload，out:应该是正确的，但看起来像您的情况，它运行了3次循环，然后调用al我把货物卸了

因此，看起来对原始代码最简单的修复应该是更改：

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

到

或者，如果可能的话，从“e.target”中引用文件名。
谢谢！但为什么这样做？正在运行“new FileReader（）”在for循环中，不创建新实例？它是闭包。上次运行uploadFiles时，i=files.length。因此，在reader.onload中运行代码时，它总是获取最后一个文件。看起来问题出在“var fileName=f.name；”在onload之外。我认为e.target.result在原始示例中应该是正确的。输出也将取决于事物的执行顺序。如果浏览器在readAsArrayBuffer之后直接调用每个onload，out:应该是正确的，但看起来像您的情况，它运行了3次循环，然后调用al我想你可能是对的！谢谢你花时间回答这个问题。如果我有更高的声誉，我会投票支持你的回答！
<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);
}

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

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