0

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

用户可以将图像拖放到该区域上，并且放置在该区域上的所有 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 事件。

任何帮助都会得到帮助^^

4

1 回答 1

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处理程序中运行。

于 2013-08-19T20:37:46.307 回答