javascript - 添加多个带有预览的图像

Question

我有多个图像需要上传，在预览中用户应该能够选择其中一张图像作为其主图像。我的想法是为它们分配一个可计数的 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');
});
});

Answer 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');
    });
});