Javascript Filereader：多个文件输入仅以一个图像作为预览结束

试图找出如何一次输入多个文件并将它们排列到div。结果，仅显示阵列的最后一个图像

HTML:

<input type="file" id="imageinput" accept="image/*" onchange="handleFiles(files)" multiple>
    <div class="cube-layout-1">
        <div id="preview1"></div>
        <div id="preview2"></div>
        <div id="preview3"></div>
        <div id="preview4"></div>
        <div id="preview5"></div>
        <div id="preview6"></div>
    </div>

        var j=0;

        function counter() {
            j++;
            return j;
        }

        function handleFiles(files) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var count = counter();
                var preview = document.getElementById("preview"+count);

                var reader = new FileReader();
                reader.onload =  (function (preview) {
                    return function () {
                        preview.style.backgroundImage = "url(" + reader.result + ")";
                    }
                })(preview);
                reader.readAsDataURL(file);
            }
        }

Javascript:

<input type="file" id="imageinput" accept="image/*" onchange="handleFiles(files)" multiple>
    <div class="cube-layout-1">
        <div id="preview1"></div>
        <div id="preview2"></div>
        <div id="preview3"></div>
        <div id="preview4"></div>
        <div id="preview5"></div>
        <div id="preview6"></div>
    </div>

        var j=0;

        function counter() {
            j++;
            return j;
        }

        function handleFiles(files) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var count = counter();
                var preview = document.getElementById("preview"+count);

                var reader = new FileReader();
                reader.onload =  (function (preview) {
                    return function () {
                        preview.style.backgroundImage = "url(" + reader.result + ")";
                    }
                })(preview);
                reader.readAsDataURL(file);
            }
        }

var j=0；
函数计数器（）{
j++；
返回j；
}
函数句柄文件（文件）{
对于（var i=0；i

例如，如果我一次选择3个图像，前两个div得到一个空的背景图像，只有最后一个div得到图像。

---

我知道这与reader.onload事件有关，它只在循环结束时触发……但是我如何才能实现我的目标呢？提前谢谢

得到的解决方案替代了：

return function () { preview.style.backgroundImage = "url(" + reader.result + ")";}

应该是：

return function (e) { preview.style.backgroundImage = "url(" + e.target.result + ")";}

---

查看我的代码尝试使用它，我解决了异步问题，因为我需要在预览时添加文件名

  function readURL(input) {
        var file = document.getElementById("article_file").value;
        console.log(file);
        var originalname = file.replace(/C:\\fakepath\\/i, '');
        console.log(name);
        if (DST()) {
            // Daylight Savings, EDT is UTC-4
            var offset = "-4";
        } else {
            // Not Daylight Savings, EST is UTC-5
            var offset = "-5";
        }
        var today = calcTime(offset);

        var month = today.getMonth() + 1;

        // appends 0 to monthes under 10
        if (month < 10)
            month = "0" + month.toString();

        if ($('table.appendo.image-uploader tbody tr').length > 2)
            $('table.appendo.image-uploader tbody tr').each(function (i, ele) {
                if(i==1)
                {
                     $('#image-preview-path').attr('src','src="/images/tp.gif"');
                     $('#image-path').attr('value','');
                }
                else if (i > 1)
                {
                    $(ele).remove();
                }
            });
        $('.upload-article').attr('name', 'Filedata[]');

        var files = $('#article_file')[0].files;
        var name = [];
        var extension = ['.jpg','jpeg','.gif','.png'];
        var flag = 1;
        name['invalid'] = 'invalid';
        for (var z = 0; z < files.length; z++){
            var ext = (files[z].name.substr(-4)).toLowerCase();
            if($.inArray(ext, extension) != -1){

            } else {
                flag = 2;
            }
        }
        var count = files.length;
        if(count <= '6') {
        if(flag == 1) {
        for (var x = 0; x < files.length; x++)
        {

            if (x == 0) {
                var file = files[x];
                var hello = file['name'].replace(/\s/g, '');
                var file_name = hello.replace(/[^.a-z0-9_-\s]/gi, '').replace(/[_\s]_/g, '-');
                name[file['size']] = file_name;
                console.log(files[x]);
                var reader = new FileReader();
                reader.addEventListener('load', function (e) {
                    console.log(e)

                    $('#image-preview-path').attr('src', e.target.result);
                    $('#image-path').attr('value', "/images/uploads/" + today.getFullYear() + "/" + month + "/" + today.getDate() + "/" + name[e.total]);

                });
                reader.onerror = function (event) {
                    console.error("File could not be read! Code " + event.target.error.code);
                };
                reader.readAsDataURL(file);
            } else {
                var file = files[x];
                var hello = file['name'].replace(/\s/g, '');
                var file_name = hello.replace(/[^.a-z0-9_-\s]/gi, '').replace(/[_\s]_/g, '-');
                name[file['size']] = file_name;
                console.log(files[x]);
                var reader = new FileReader();
                reader.addEventListener('load', function (e) {
                    console.log(e)
                    if ($('table.appendo>tbody:eq(0)>tr').length - 1 > 0)
                        index = $('table.appendo>tbody:eq(0)>tr').length - 1
                    else
                        index = 'invalid';
                    var table = $('table.appendo tbody tr:eq(1)').clone();
                    table.find('img').attr('id', 'image-preview-path');
                    table.find('img').attr('src', e.target.result);
                    table.find('input').attr('id', 'image-path');
                    table.find('input').attr('value', "/images/uploads/" + today.getFullYear() + "/" + month + "/" + today.getDate() + "/" + name[e.total]);
                    $('table.appendo.image-uploader tbody').append(table);

                });
                reader.onerror = function (event) {
                    console.error("File could not be read! Code " + event.target.error.code);

                };
                reader.readAsDataURL(file);
            }
        }
      } else {
          alert('Not a valid file extension.');
          $('#article_file').val("");
        } 
      } else {
          alert('You have attempted to queue too many files.\nYou may select six file.');
          $('#article_file').val("");
      }
    }

函数readURL（输入）{
var file=document.getElementById（“article_file”）.value；
console.log（文件）；
var originalname=file.replace（/C:\\fakepath\\/i，，）；
console.log（名称）；
if（DST（））{
//夏令时，EDT是UTC-4
var offset=“-4”；
}否则{
//不是夏令时，EST是UTC-5
var offset=“-5”；
}
var today=计算时间（偏移量）；
var month=today.getMonth（）+1；
//将0追加到10以下的月份
如果（月<10）
month=“0”+month.toString（）；
如果（$（'table.appendo.image-uploader tbody tr'）。长度>2）
$（'table.appendo.image-uploader tbody tr'）。每个（函数（i，ele）{
如果（i==1）
{
$（“#图像预览路径”）.attr（'src'，'src=“/images/tp.gif”）；
$（'#图像路径'）.attr（'value'，''）；
}
否则，如果（i>1）
{
$（ele.remove（）；
}
});
$（'.upload article'）.attr（'name'，'Filedata[]）；
var files=$（“#文章_文件”）[0]。文件；
变量名称=[]；
变量扩展名=['.jpg'、'jpeg'、'.gif'、'.png']；
var标志=1；
名称['invalid']='invalid'；
对于（var z=0；ztbody:eq（0）>tr'）。长度-1
其他的
索引='无效'；
var table=$（'table.appendo tbody tr:eq（1）'）.clone（）；
table.find（'img'）.attr（'id'，'image preview path'）；
表.find（'img'）.attr（'src'，e.target.result）；
table.find（'input'）.attr（'id'，'image path'）；
table.find（'input'）.attr（'value'，“/images/uploads/”+today.getFullYear（）+“/”+month+“/”+today.getDate（）+“/”+name[e.total]）；
$（'table.appendo.image-uploader tbody'）.append（table）；
});
reader.onerror=函数（事件）{
console.error（“无法读取文件！代码”+event.target.error.Code）；
};
reader.readAsDataURL（文件）；
}
}
}否则{
警报（'不是有效的文件扩展名'）；
$（“#文章_文件”）.val（“”）；
} 
}否则{
警报（'您试图将太多文件排队。\n您可以选择六个文件'）；
$（“#文章_文件”）.val（“”）；
}
}