javascript FileReader多个不工作

Question

我在html中使用一个输入来一张一张或多张选择和上传图片。

我想在上传图片之前显示预览，我正在使用 js FileReader。它适用于一张图片，但不适用于多张图片。

$('#fileToUpload').change(function(){
    var file = this.files;
    filepreview(file);
});



function filepreview(files)
{
    var length = files.length;

    for(var i=0 ; i<length ; i++)
    {
            var file = files[i];

            var reader = new FileReader();
            reader.addEventListener("load",function(e){
                $('#pic'+i+'').attr('src' , ''+e.target.result+'');
            });
            reader.readAsDataURL(file);
    }
}

Answer 1

基本上 i 总是长度，因为事件发生在循环迭代之后：

reader.addEventListener("load",function(e){//async stuff
            $('#pic'+i+'').attr('src' , ''+e.target.result+'');//i = length
});

所以你可能想绑定 i:

reader.addEventListener("load",function(i,e){//take over the bound i
            $('#pic'+i+'').attr('src' , ''+e.target.result+'');
}.bind(this,i));//the magic part