JavaScript FileReader多张图片

Question

JavaScript FileReader多张图片

4

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

要求：有一个文件输入字段，启用“multiple”选项，我希望用户选择几张图片，并在提交之前就能在页面上看到这些图片（以便他/她可以删除它们！）。但问题是屏幕上只显示一张图片。虽然已创建了标签，但除了最后一张图片外，其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。但是，在提交后，服务器端确实会收到所有的图像： enter image description here

。我在这里漏掉了什么？

- Shekhar Joshi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Musa · Accepted Answer

请看JavaScript闭包如何工作？

你的onloadend回调将在for循环完成后触发，因此在每个你创建的FileReader上触发onloadend时，img将被设置为最后一个创建的图像元素。解决这个闭包问题的简单方法是使用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);
        });