上传图片后隐藏图片预览 [英] Hide Preview of image once it uploaded

问题描述

我们正在从站点上传图像/p>

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

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

现在我们要上传新的第二张图片，因此当我们单击"上传图片"按钮时，旧图片仍然显示为预览，但是我想要隐藏那个.....

<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();
});

解决方案

要完美执行此操作，您需要在上载图像上附加整个新图像块并将其隐藏，以在添加图像"操作成功后将整个块删除(在此处隐藏保存按钮).

we are uploading an image from site

Before displaying in site, we are displaying Preview of the image as below :

after this, we click on add image and display image in site.

now we want to upload new 2nd image, so when we click on "Upload image" button , again the old image is still displaying as preview, but i want to hide that.....

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

script

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]);
    }
}

mainly i am using this code to hide preview of image , but that is not working :

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

also tried below code to hide :

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

解决方案

to execute this perfectly you need to append whole new image block on uploade image and to hide it remove whole block on "Add Image" action success(where you hide save button).

这篇关于上传图片后隐藏图片预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！