Question

我有以下问题。

我有一个多个文件的上传表单。上传过程顺利。该问题与FileReader（）结果有关。当我上传多个文件（图像）时，我需要在上传完成后创建相应的拇指。

files = e.target.files;

for (var i = 0; i < files.length; i++) {

    //ajax request goes here

    var reader = new FileReader();
    reader.onload = (function (e) {

        var img = document.createElement('img');
        img.file = e;
        img.className = 'thumbs_';
        img.src = e.target.result;

        //Every image has a wrapper div with the id 'nDv0','nDv1','nDv2' etc.                   

        document.getElementById('nDv' + i).appendChild(img);
    })(e);

    reader.readAsDataURL(files[i]);

    //request sent

}

如果我删除匿名函数周围的闭包，当for循环退出时，i的值将是任何值。例如，如果有3个文件，则i的值为3，结果将附加到最后一个包装div，并显示图像。

对于闭包，每个图像都会附加到相应的div，但由于返回的结果未定义，因此不会显示图像。

那么，我怎样才能将每个拇指附加到相应的div？

Answer 1

您有logic error：

reader.onload = (function (e) {
    //onload code
    //inside function e is event from outside
})(e);//e is event from upper code

i将等于files.length，因为onload处理程序是异步的。因此，您必须将onload处理程序更改为：

reader.onload = function (index) {
    var img = document.createElement('img');
    img.className = 'thumbs_';//it's right className?
    img.src = this.result;//result is dataURL                
    document.getElementById('nDv' + index).appendChild(img);
}.bind(reader, i);

从FileReader（）获取结果

1 个答案: