顯示多個縮略圖不起作用

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區域中的所有縮略圖，但我只能看到最后一個。

看來我搞砸了一些同步之類的東西。 “文件”是一個對象，管理在“拖放區”上拖動的文件。 我希望每個縮略圖都有自己的畫布，以便以后可以向它們添加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));

作品： 例子

我還應該注意，我重新排列了您的代碼以使其完全在onload處理程序中運行。