上传后隐藏图片预览

Question

我们正在从site

上传图片

在网站上显示之前，我们正在显示图像的预览，如下所示：

之后，我们点击添加图片并在网站上显示图片。

现在我们要上传新的第二张图片，所以当我们点击“上传图片”按钮时，旧图片仍会显示为预览，但我想要隐藏......

<img id="previewImg" src="#" style="display: none;height: 100px; width: 100px;" >

脚本

jQuery(document).ready(function () 
{ 
jQuery('body').delegate('.newcustomimage', 'change', function () { 
if (jQuery(this).val()) { 
console.log(jQuery(this).val());
if(jQuery(this).val()){
    var reader = new FileReader();       
}

jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploded.</div>'); 
} 
}); 
}); 

function readURL(input) {
jQuery('#previewImg').hide();
    if (input.files && input.files[0]) { 

        var reader = new FileReader(); 
        reader.onload = function (e) {
            jQuery('#previewImg').attr('src', e.target.result);
            jQuery('#previewImg').show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

主要是我使用此代码来隐藏图像的预览，但这不起作用：

jQuery('#previewImg').hide();

还尝试在下面隐藏代码：

jQuery(document).on(".aitcg-button", "click", function() {
    jQuery('#aitcg-tool-UserImage #previewImg')[0].hide();
});

Answer 1

要完美地执行此操作，您需要在uploade图像上附加全新的图像块并隐藏它，在“添加图像”操作成功时删除整个块（隐藏保存按钮的位置）。