如何在頁面上多次使用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 联系我们: