Question

我正在尝试使用预览制作一些上传图像功能，我将图像URL推送到数组并放置if条件以避免上传超过1个图像，并在删除图像预览时清空数组。
但我有一些问题，当我选择一些图像让我们说图像A并将其删除为预览框时，它应该能够在下一步中选择图像A，但它不能，除非我选择另一个图像与不同的名字，这是我的代码如下：

＆＃13;

[A-Z]\w*

＆＃13;

var arrCover = [];
var arrIm = [];

function uploadBanner(arr, prefix) {
    var cover;
    if(arr === 'coverBanner'){
        cover = ($('.campaign-cover-image'))[0].files[0];
        arr = arrCover;
    }else {
        cover = ($('.campaign-im-image'))[0].files[0];
        arr = arrIm;
    }

    if (cover) {
        var reader = new FileReader();
        reader.onload = function (e) {
            const image = e.target.result;
            arr.push(image);
            if(arr.length < 2){
                var imgs = $(`
                    <div class="campaign-cover-image${prefix}">
                    <img class="image-cover${prefix}" 
                    src=${arr.slice(-1)}>
                    </div>`);
                var removeIcon = $(`<div class="delete-cover${prefix}">x</div>`);
                $('.campaign-cover' + prefix).append(imgs);
                $('.campaign-cover-image' + prefix).append(removeIcon);
            } else {
                alert('only 1 image');
            }
        };
        reader.readAsDataURL(cover);
    }

    $(document.body).on('click','.delete-cover' + prefix, function(){
        if(prefix === "-banner"){
            var prevImg = $('.image-cover' + prefix).attr('src');
            arrCover.filter(function(el){
                var prevArr =  el === prevImg;
                if(prevArr){
                    arrCover = [];
                    $('.campaign-cover-image'+ prefix).val('');
                }
            });
            $(this).closest('.campaign-cover-image' + prefix).remove();
        }
    });
}
$(document).ready(function(){
  uploadBanner();
});

＆＃13;

#upload_button {
  display: inline-block;
}
#upload_button input[type=file] {
  display:none;
}
.btn {
  border: 1px solid black;
}

＆＃13;

Answer 1

有点hacky但是你可以尝试刷新你的dom。

worker效果很好！

Force DOM refresh in JavaScript

DOM在运行功能后不会刷新

1 个答案: