问我的预览显示旧输入和新输入如何才能只显示新输入
EN

Stack Overflow用户

提问于 2019-02-19 14:17:52

回答 1查看 30关注 0票数 0

当我在没有上传的情况下输入2张图片到预览时，它显示的很好。当我选择其他文件时，问题就出现了。它们将被添加到预览中，而不是被删除。基本上现在只有新的2个图像将被上传，但在预览中，他看到4个图像。当他输入新图像时，我如何删除旧图像。

我认为If语句会对这种情况有所帮助，但我不确定如何编写它。

这是我的JS预览：

$(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>

javascript

jquery

html

laravel

laravel-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-19 15:22:12

这是因为您使用的是.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',);
});

});