javascript - FileReader onloadend 中循环变量的值

Question

我正在尝试处理通过 html5 dropzone/fileinput 创建的文件列表。 files[] 实际上不是一个 FileList，而是一个包含 File 对象的数组。

只要 files[] 只包含 1-2 个文件，这就可以工作，但是突然有更多文件时，每个控制台输出都是相同的(files[] 中的最后一个文件)。例如，对于 4 个文件，我得到 4 次“filereader.onloaded: File: save-view.html index:4”，其中 save-view.html 是最后一个文件。

    for(var i=0; i < files.length; i++)
    {
        var filereader = new FileReader();
        filereader.myfile = files[i];
        filereader.myindex = i;

        filereader.onloadend = function()
        {
            console.log("filereader.onloaded: File: "+filereader.myfile.name+" index:" +filereader.myindex);
            //here we call some other functions which most likely don't cause any problems
        }
        filereader.readAsArrayBuffer(file);
    }

我已经尝试了很多，比如创建一个 filereader 数组(这样 var filereader 永远不会被覆盖)，并将索引保​​存为 filereader 的一个附加成员变量(这样值在 i++ 之后就不会丢失)，但都没有成功了。

Answer 1

filereader 随循环的每次迭代而变化，并且循环不会在每次继续之前等待回调触发。因此，每当 onload 回调触发时，filereader 可能没有与特定 onload 事件关联的 FileReader 对象。

要确保您在回调中使用正确的 FileReader 对象，请使用 this 关键字，或者您可以从传递给回调的事件对象中获取它；

filereader.onloadend = function(event)
{
    console.log("filereader.onloaded: File: "+this.myfile.name+" index:" +event.target.myindex);
    //here we call some other functions which most likely don't cause any problems
}