上传后隐藏图像预览

Question

我们正在从站点上传一张图片

​

​

在现场显示之前，我们将显示图像的预览如下：

​

​

在此之后，我们点击添加图像并在站点中显示图像。

​

​

现在我们想上传新的第二张图片，所以当我们点击"Upload image“按钮时，旧图像仍然显示为预览，但我想隐藏它……

​

​

<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

要完美地执行这个操作，您需要在上传图像上添加一个全新的图像块，并隐藏它，删除"Add Image“操作成功上的整个块(在这里隐藏保存按钮)。