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

[英]How do I use FileReader.onload multiple times on a page?


I have a page that has multiple inputs for single file upload. Kind of like this:

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

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

Inside uploadFiles(), I first create an array of each file in the input fields:

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

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

Then I attempt to call FileReader's onLoad event for each file in the "files" array:

然后我尝试为“files”数组中的每个文件调用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() is a function that works.

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

When I run this, only the last item in the "files" array is uploaded.

当我运行它时,只上传“files”数组中的最后一项。

If inputField1 has a file named file1.jpg, inputField2 has a file named file2.jpg, etc, I would get the following in the console:

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

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

I feel like I am missing something truly fundamental with how to use FileReader. Any help would be appreciated. Thank you!

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

2 个解决方案

#1


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

#2


0  

It looks like the problem was with the "var fileName = f.name;" being outside the onload. I think the e.target.result would have been correct in the original example. The output would also be dependent on execution order of things. If the browser called each onload directly after readAsArrayBuffer, the out: would like right, but it looks like your case, it was running the loop all 3 times and then calling all the onloads.

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

So it looks like the simplest fix to original code would have been to change:

所以看起来对原始代码的最简单修复就是改变:

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

TO

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

Or if possible reference the file name from "e.target".

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/08/26/c1a98677c1517ecf7cfd3b86c6332cd1.html



 
  © 2014-2022 ITdaan.com 联系我们: