Javascript FileReader 多个图像答案

【问题标题】：Javascript FileReader Multiple ImagesJavascript FileReader 多个图像
【发布时间】：2015-03-23 19:03:50
【问题描述】：

我正在尝试在我的项目中实现 javascript 的 FileReader 接口。

要求：有一个启用“多个”的文件输入字段，我希望用户应该选择一些图像并且应该在点击提交之前看到页面上的图像（以便他可以删除它如果（她）他想要！）。但问题是屏幕上只显示一张图像。标签已创建，但 src 为空，除了最后一张图像。

代码：

<html>
<head>
    <meta charset="windows-1252">
    <title></title>
</head>
<body>
    <div>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="abc[]" multiple/>
            <input type="submit"/>
        </form>
    </div>
<img id="image0"/>
</body>

<script src="resources/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script>
    $('document').ready(function () {
        $("input[name='abc[]']").change(function (e) {
            console.log(e.originalEvent.srcElement.files.length);
            for (var i = 1; i <= e.originalEvent.srcElement.files.length; i++) {

                var file = e.originalEvent.srcElement.files[i-1];
                var img = document.createElement("img");
                img.id = "image"+i;
                var reader = new FileReader();
                reader.onloadend = function () {
                    img.src = reader.result;
                }
                reader.readAsDataURL(file);
                $("#image"+(i-1)).after(img);
            }
        });
    });
</script>

例如，如果我选择了 img1，则在图像选择弹出窗口中。 img2 和 img3，只显示 img3。但是，在点击提交时，我确实在服务器端获得了所有图像：

我在这里错过了什么？

【问题讨论】：

标签： javascript jquery html image filereader

【解决方案1】：

看看How do JavaScript closures work?

您的 for onloadend 回调将在 for 循环完成后触发，因此 img 将设置为您创建的每个 FileReader 触发 onloadend 时创建的最后一个图像元素。这个闭包问题的一个简单解决方法是使用 IIFE 返回一个函数，该函数在循环中使用 img 变量的值作为处理程序

            reader.onloadend = (function (img) {
                return function(){
                    img.src = reader.result;
                };
            })(img)

或者使用JQuery的each

        $.each(e.originalEvent.srcElement.files, function(i, file) {

            var img = document.createElement("img");
            img.id = "image"+(i+1);
            var reader = new FileReader();
            reader.onloadend = function () {
                img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("#image"+i).after(img);
        });

【讨论】：