Javascript FileReader 多张图片

Question

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

要求：有一个启用了 "multiple" 的文件输入字段，我希望用户应该 select 一些图像并且应该在点击提交之前就在页面上看到图像（所以如果他（她）想要，他可以删除它！）。但问题是屏幕上只显示一张图像。标签已创建，但 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>

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

我在这里错过了什么？

Answer 1

看看How do JavaScript closures work?

您的 onloadend 回调将在 for 循环完成后触发，因此 img 将设置为每个 [=15] 触发 onloadend 时创建的最后一个图像元素=] 你创造的。这个闭包问题的一个简单解决方法是使用 IIFE return 一个函数，该函数在循环中的那个时刻使用 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);
        });

Javascript FileReader 多张图片

Javascript FileReader Multiple Images

html

javascript

jquery

image

filereader