Добавление нескольких изображений с предварительным просмотром

Question

У меня есть несколько изображений, которые необходимо загрузить, и в предварительном просмотре пользователь должен иметь возможность выбрать одно из этих изображений для своего основного изображения. Моя идея состояла в том, чтобы назначить им идентификатор с подсчитанным, но это не работает, они всегда иметь одинаковый идентификатор количества загруженных изображений. Это 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, которое теперь равно размеру вашего массива.

Исправлено путем правильного объявления переменной.

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