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