添加多个带预览的图像答案

【问题标题】：Adding multiple images with preview添加多个带预览的图像
【发布时间】：2020-01-26 05:05:33
【问题描述】：

我有多个图像需要上传，并且在预览中用户应该能够选择其中一个图像作为他们的主图像。我的想法是为他们分配一个带有计数的 id，但这似乎不起作用，他们始终具有与上传的图像数量相同的 ID。这是我正在使用的js代码

$(function() {

  var imagesPreview = function(input, placeToInsertImagePreview) {

    if (input.files) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $($.parseHTML("<img height=' 50px' width='50px' class='img-id' id='" +i+"'>")).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

            }

            reader.readAsDataURL(input.files[i]);

        }
    }

};

$('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
});
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我认为这里的问题是因为您将 i 声明为全局变量，因此当调用 onload 方法时，它会获得 i 全局值，该值现在等于您的数组大小。

通过正确声明 var 来修复。

$(function() {

    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;

            for (var i = 0; i < filesAmount; i++) {
                let index = i;
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML("<img height=' 50px' width='50px' class='img-id' id='" + index + "'>"))
                      .attr('src', event.target.result)
                      .appendTo(placeToInsertImagePreview);

                }

                reader.readAsDataURL(input.files[i]);

            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

【讨论】：