Question

我正在使用 dataTransfer

将XMLHttpRequest中的图像文件传递给此函数 readfiles（files）

我要做的是同时在 reader.onload（）功能内的一行代码中预览图像和图像文件名。

并且因为将有多个文件传递给该函数，我将它们放入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次。你需要的是一个闭包，它将在每次迭代时保持正确的上下文。您可以按如下方式实现此目的。检查小提琴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

    }
}

Answer 2

由于onload将在稍后时间运行，因此x比您的文件数量多一个。{1}}。例如，如果您有4个文件，x将在执行5时为onload。

因此，请保留对当前文件的引用：

function readfiles(files) {
    for (var x = 0; x < files.length; x = x + 1) {
        // keep reference to current file on iteration
        var file = files[x];

        // create closure and execute it
        (function (file) {
            var reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = function(e) {
                console.log(file.name);
            }
        }(file)); // pass the `file` to the function
    }
}

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

2 个答案: