javascript - 循环遍历 FileReader 的文件，输出始终包含循环的最后一个值

Question

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

<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 个文件:

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

我得到这个输出:

file2__content1
file2__content2

如何修复显示代码:

file1__content1
file2__content2

Answer 1

问题是您现在正在运行循环，但是您设置的回调正在稍后运行(当事件触发时)。当它们运行时，循环结束并保持在最后一个值。因此，在您的情况下，它将始终显示“file2”作为名称。

解决方案是将文件名与其余部分放在一个闭包中。一种方法是创建一个 immediately-invoked function expression (IIFE)并将文件作为参数传递给该函数:

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

或者，您可以定义一个命名函数并正常调用它:

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