Javascript 文件读取器中追加的订单问题

我得到了一个Jquery函数，它读取一个文件列表并在一个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);
    } 
}

函数加载\u图像（文件）{
对于（var i=0；i

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

---

你知道吗？

方法

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);
    } 
}

函数加载\u图像（文件）{
对于（var i=0；i

这是一个异步读取，这就是为什么我理解我的错误，但有了你的解决方案，问题还是一样的否？它只会创建许多空div和一个包含所有图像的最终div。真的吗？我不明白这是怎么发生的，它应该像你想的那样工作。您可以发布一个JSFIDLE吗？这样它现在就可以正常工作了？如果是，请将问题标记为已回答。不，请在加载图像时查看HTML代码，您有3个空div，然后是一个包含所有图像的div。顺序不对。哦，是的，绝对正确。变量正在被提升。您需要使用函数创建作用域。像这样，这并不是最理想的，但它是有效的。例如，您可以使用数组forEach方法而不是For循环。那会更好。