0

我有一个 Jquery 函数，它读取 FilesList 并在 IMG html 对象中显示图像。

function load_images(files) {
    for (var i = 0; i < files.length; i++) {
        // Validate the image type
        if(validate_file(files[i])) {
            var reader = new FileReader();
            reader.onload = function(e) {    
                $(".upload_thumbnails").append(render_thumb(e.target.result, i)); // Return a string with the img object
            };
        } 
        reader.readAsDataURL(f);
    } 
}

但我的图像不是按文件列表的顺序附加的。fileList（var 文件）由多输入文件 html 对象实现。

你有什么主意吗 ？

4

1 回答 1

1

该方法readAsDataURL是异步的，这意味着您的循环将创建大量加载数据的请求，但由于该方法是异步的，因此无法知道onload回调将按什么顺序调用。行为是不确定的。

这可以通过将所有元素连同它们的索引一起存储在一个数组中来解决，然后在它们全部加载完成后实际渲染出所有图像。

另一种选择是在请求启动时创建一个占位符 div 并在 onload 回调的关闭中捕获它。然后您可以将图像附加到该 div，这将导致您想要的行为。

像这样：

function load_images(files) {
    for (var i = 0; i < files.length; i++) {
        // Validate the image type
        if(validate_file(files[i])) {
            var reader = new FileReader(),
                div    = $("<div></div>");
            $(".upload_thumbnails").append(div);            

            reader.onload = function(e) {    
                div.append(render_thumb(e.target.result, i)); // Return a string with the img object
            };
        } 
        reader.readAsDataURL(f);
    } 
}
于 2013-11-04T22:58:45.730 回答