循环遍历FileReader的文件，输出始终包含循环的最后一个值 [英] Looping through files for FileReader, output always contains last value from loop

问题描述

我正在使用FileReader API读取本地文件。

I'm using FileReader API to read files on local.

<input type="file" id="filesx" name="filesx[]" onchange="readmultifiles(this.files)" multiple="" />

<script>
function readmultifiles(files) {
    var ret = "";
    var ul = document.querySelector("#bag>ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < files.length; i++)  //for multiple files
    {
        var f = files[i];
        var name = files[i].name;
        alert(name);
        var reader = new FileReader();  
        reader.onload = function(e) {  
            // get file content  
            var text = e.target.result;
            var li = document.createElement("li");
            li.innerHTML = name + "____" + text;
            ul.appendChild(li);
        }
        reader.readAsText(f,"UTF-8");
    }
}
</script>

如果输入包含2个文件：

If input includes 2 files:

file1 ---- "content1"
file2 ---- "content2"

我得到这个输出：

I get this output:

file2__content1
file2__content2

如何修正要显示的代码：

How to fix code to display:

file1__content1
file2__content2

推荐答案

你正在运行循环现在，但是你正在设置的回调是在后来运行（当事件触发时）。当它们运行时，循环结束并保持在最后的值。因此，它总是会在你的案例中显示file2作为名称。

The problem is you're running the loop now but the callbacks you are setting are getting run later (when the events fire). By the time they run, the loop is over and remains at whatever the last value was. So it will always show "file2" in your case for the name.

解决方法是将文件名放在一个闭包中，剩下的就放在闭包中。一种方法是创建一个立即调用的函数表达式（IIFE）并将该文件作为参数传递到该函数：

The solution is to put the file name inside a closure with the rest. One way to do this is create an immediately-invoked function expression (IIFE) and pass the file in as a parameter to that function:

for (var i = 0; i < files.length; i++) { //for multiple files          
    (function(file) {
        var name = file.name;
        var reader = new FileReader();  
        reader.onload = function(e) {  
            // get file content  
            var text = e.target.result; 
            var li = document.createElement("li");
            li.innerHTML = name + "____" + text;
            ul.appendChild(li);
        }
        reader.readAsText(file, "UTF-8");
    })(files[i]);
}

或者，您可以定义一个命名函数并将其正常调用：

Alternately, you can define a named function and call it as normal:

function setupReader(file) {
    var name = file.name;
    var reader = new FileReader();  
    reader.onload = function(e) {  
        // get file content  
        var text = e.target.result; 
        var li = document.createElement("li");
        li.innerHTML = name + "____" + text;
        ul.appendChild(li);
    }
    reader.readAsText(file, "UTF-8");
}

for (var i = 0; i < files.length; i++) {
    setupReader(files[i]);
}

这篇关于循环遍历FileReader的文件，输出始终包含循环的最后一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！