Question

所以我正在为网站制作这个“放置区”。

用户可以在此区域上拖放图像，并且在该区域上放置的所有jpeg都显示为缩略图。我列出了所有掉落在该区域的jpeg，并且工作正常。现在，每当新的jpeg添加到该列表时，我想将所有jpeg显示为大小为100x150px的缩略图。

这是我的代码。这就像小提琴一样http://jsfiddle.net/cJkYj/2/

function displayThumbnailes(  ) {
    //Clear the div.
    var outerDiv = document.getElementById('fileChooserDiv');
    while (outerDiv.hasChildNodes()) {
        outerDiv.removeChild(outerDiv.lastChild);
    }
    var div = document.createElement('div');
    outerDiv.appendChild(div);
    //Go over the Files and add Thumbnails for all jpegs.
    for( var i = 0; i < files.size(); i++) {
        if( files.get(i).type == "image/jpeg") {    
            var reader = new FileReader();
            reader.onloadend = function() {
                var result = reader.result; 
                displayThumbnail( result, div );
            }
            reader.readAsDataURL(files.get(i));
        }
    }
}

function displayThumbnail( src, div ) { 
    var img = new Image();
    img.onload = function () {
        var cv = document.createElement('canvas');
        cv.style.border = "1px solid #ffffff";
        cv.width = 100;
        cv.height = 150;
        var ctx = cv.getContext( "2d" );
        ctx.drawImage(img, 0, 0, 100, 150);
        div.appendChild(cv);
    }
    img.src = src;
}

我的问题：我相信这段代码会显示div区域内的所有缩略图，但我只看到最后一张。

这看起来像是弄乱了某些同步或其他东西。 “files”是一个Object，用于管理拖放在“drop-zone”上的文件。我希望每个缩略图都有自己的画布，以便我以后可以添加一个onclick事件。

任何帮助都会受到影响^^

Answer 1

您的代码：

reader.onloadend = function() {
    var result = reader.result; 
    displayThumbnail( result, div );
}
reader.readAsDataURL(files.get(i));

由于异步onloadend回调，

失败了。每次遍历循环都会更新外部reader变量，因此每个事件仅使用最后一个引用。

您可以更改代码以将其包装在闭包中：

(function(reader) {            
    reader.onloadend = function() {
        var result = reader.result; 
        displayThumbnail( result, div );
}})(reader);

或（首选）更改您的代码以使用特定于事件的数据：

reader.onloadend = function(evt) {
    var result = evt.target.result; 
    displayThumbnail( result, div );
};

- 或使用onload -

reader.onload = function (evt) {
    var result = evt.target.result;
    displayThumbnail(result, div);
}
reader.readAsDataURL(files.get(i));

有效：example

我还应该注意，我重新安排了您的代码，以便在onload处理程序中完全运行。

显示多个缩略图不起作用

1 个答案: