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

然后我尝试为＆＃34;文件＆＃34;中的每个文件调用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（）是一个有效的函数。

当我运行此选项时，仅显示＆＃34;文件中的最后一项＆＃34;阵列已上传。

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

Answer 2

看起来问题出在“var fileName = f.name;”在外面。我认为e.target.result在原始示例中是正确的。输出还取决于事物的执行顺序。如果浏览器在readAsArrayBuffer之后直接调用每个onload，则out：想要正确，但它看起来像你的情况，它运行循环所有3次然后调用所有onloads。

因此看起来对原始代码的最简单修复就是改变：

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

或者，如果可能，请参考“e.target”中的文件名。

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

2 个答案: