Мой предварительный просмотр показывает старый ввод и новый ввод, как я могу показать только новый ввод

Question

Когда я ввожу 2 изображения для предварительного просмотра без загрузки, они отображаются очень хорошо.Проблема возникает, когда я выбираю другие файлы.Они добавляются в предварительный просмотр вместо удаления.По сути, теперь будут загружены только новые 2 изображения, но в окне предварительного просмотра он видит 4 изображения.Как я могу удалить старые изображения, когда он вводит новые.

Я подумал, что если заявление поможет делу, но я не уверен, как его написать.

Это мой JS Preview:

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if ('.previewdeleter' ===('image') ){
            var deletepreview = ('previewdeleter')
        }

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

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

                reader.onload = function(event) {
                    $('<div class="previewdeleter position-relative" data-item-id-div="input.files[i].length" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
                        '<img alt="" src=' + event.target.result + ' style="height:200px;width: 100%; display: inline-block;">')
                        .appendTo(placeToInsertImagePreview);
                }
                reader.readAsDataURL(input.files[i],);
            }

        }


    };

    $('#images').on('change', function() {
        imagesPreview(this, '#previewHolder',);
    });

});

Это мой HTML:

               <input value="" type="file" id="images" name="images[]" accept="image/*" multiple />
                <div id="previewHolder" data-item-id-div="input.files[i].length" multiple="" class="previewdeleter position-relative">
                </div>

Answer 1

Это потому, что вы используете .appendTo - предварительный просмотр изображения будет добавлен к элементу предварительного просмотра изображения.Это означает, что каждый раз, когда вы выбираете изображение, в предварительном просмотре будут отображаться дополнительные изображения.

Чтобы предотвратить это, вы должны очистить окно предварительного просмотра перед добавлением новых предварительных просмотров, что может быть достигнуто следующим образом:

$('#previewHolder').empty();

С оригинальным кодом это будет работать так:

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {
        $('#previewHolder').empty(); // Empty previewholder

        if ('.previewdeleter' ===('image') ){
            var deletepreview = ('previewdeleter')
        }

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

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

                reader.onload = function(event) {
                    $('<div class="previewdeleter position-relative" data-item-id-div="input.files[i].length" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
                        '<img alt="" src=' + event.target.result + ' style="height:200px;width: 100%; display: inline-block;">')
                        .appendTo(placeToInsertImagePreview);
                }
                reader.readAsDataURL(input.files[i],);
            }

        }


    };

    $('#images').on('change', function() {
        imagesPreview(this, '#previewHolder',);
});

});