javascript - Jquery Onload 函数停止 for 循环，在函数内部传递 for 循环 x

Question

我正在使用 dataTransfer

将图像文件从 XMLHttpRequest 传递到此函数 readfiles(files)

我想做的是在 reader.onload() 函数内的一行代码中同时预览图像和图像文件名。

并且因为将有超过 1 个文件传递给函数，所以我将它们放入 for 循环中

问题是当我尝试通过 readDataURL 预览图像时没问题，但我认为无法预览文件名，因为 reader.onload() 函数停止了for 循环遍历图像文件。

这是我的代码

function readfiles(files) {

    var x;

    for(x = 0; x < files.length; x = x + 1) {

        var reader = new FileReader();
        reader.readAsDataURL(files[x]);
        reader.onload = function(e) {
            console.log(e.target.result);
            console.log(files[x].name);
        }   

    }
}

现在已经搜索了大约 5 个小时的解决方案，任何帮助!

Answer 1

ROX 的回答是不对的。在他的例子中，您会看到它将输出相同的文件名 4 次。您需要的是一个闭包，它基本上可以在每次迭代中保持正确的上下文。您可以按如下方式实现。检查 fiddle http://jsfiddle.net/cy03fc8x/ .

function readfiles(files) {
    for(x = 0; x < files.length; x = x + 1) {
        var file = files[x];
        (function(file){   //this is a closure which we use to ensure each iteration has the right version of the variable 'file'
            var reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = function(e) {
                console.log(e.target.result);
                console.log(file.name);
            }
        })(file);          //on each iteration, pass in the current file to the closure so that it can be used within

    }
}