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

Javascript - onload函数运行时变量undefined

1 个答案: