javascript - Javascript - onload 函数运行时未定义的变量

Question

for (var i=0, file; file=files[i]; i++) {
    if (file.type=='image/jpeg') {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#upload_preview').append('<img src="'+e.target.result+'" width="150" alt="" />');
            alert(file.type); // error - file is undefined
        }
        reader.readAsDataURL(file);
    }
}

在定义文件的代码块中声明了变量读取器，但错误报告变量文件未定义。这让我发疯，我知道这是非常基本的东西。

Answer 1

所以for (var i=0, file; file=files[i]; i++)评论中提到的这个循环将undefined在最后一个循环中设置文件。您应该each在 for 循环中使用或调用函数来保存范围。

files.forEach(function(file){
if (file.type=='image/jpeg') {
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#upload_preview').append('<img src="'+e.target.result+'" width="150" alt="" />');
        alert(file.type); // error - file is undefined
    }
    reader.readAsDataURL(file);
}
})

或者如果您需要支持旧版浏览器：

for (var i=0, l=files.length; i < l; i++) {
    (function(i) {
        var file = files[i];
        if (file.type == 'image/jpeg') {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#upload_preview').append('<img src="' + e.target.result + '" width="150" alt="" />');
                alert(file.type); // error - file is undefined
            }
            reader.readAsDataURL(file);
        }
    })(i);
}