隐藏图像上的关闭图标

用例是，用户可以上传新图像作为个人资料图片。我为此使用了fileinput jQuery插件。我可以将图片和路径上传到数据库，以便在需要时显示。隐藏图像上的关闭图标

上传图片后，用户可以通过点击图片右上方的关闭图标来选择删除图片。

用户删除用户图像后，显示默认图像。我需要的是，当显示默认图像时，不应显示关闭图标（用户尚未上传任何图像）。关闭图标应该仅在上传时删除上传的图像时才显示在图像的预览中。我希望我不会感到困惑。我正在使用jQuery fileinput插件。

这里是视图文件的代码。

输入文件输入jQuery插件。

<div id="kv-avatar-errors-2" class="" style="position:absolute; left:80px; top:20px;width:800px;display:none"></div> 
<div class="kv-avatar" style="width:200px"> 
<input id="avatar-2" name="userprofile" type="file" class="file-loading"> 
</div>

这是我写的脚本。

var img = '<?php echo $user_img ?>'; 

    if(img) 
    { 
     var image = '<img src="/'+img+'" alt="Your Avatar" style="width:100px">'; 
    } 
    else 
    { 
     var image = '<img src="/uploads/profile_pics/default_avatar_male.jpg" alt="Your Avatar" style="width:100px">'; 

    } 
    <?php if(isset($editMode) && !empty($editMode)) {?> 

     fileInput(image); 

    <?php } ?> 
     $('.close').click(function() { 

        var userId = '<?php echo $user_id ?>'; 
        var image_path = '<?php echo $user_img ?>'; 

        jQuery.ajax({ 
         type: "POST", 
         url: "<?php echo site_url('Users/deleteProfileImage') ?>", 
         data: {user_id: userId, dp: image_path}, 
         dataType: 'json', 
         success: function(response) { 
         var image = '<img src="/uploads/profile_pics/default_avatar_male.jpg" alt="Your Avatar" style="width:100px">'; 
         $(".file-default-preview").html(image); 
         document.querySelector(".close").style.display="none"; 

        } 
       }); 
      }); 
     }); 

function fileInput(image){ 

$("#avatar-2").fileinput({ 
     overwriteInitial: true, 
     maxFileSize: 1500, 
     showClose: true, 
     showZoom: false, 
     showCaption: false, 
     showBrowse: false, 
     browseOnZoneClick: true, 
     removeLabel: '', 
     removeIcon: '<i class="glyphicon glyphicon-remove"></i>', 
     removeTitle: 'Cancel or reset changes', 
     elErrorContainer: '#kv-avatar-errors-2', 
     msgErrorClass: 'alert alert-block alert-danger', 
     defaultPreviewContent: image + '<h6 class="text-muted">Click to select</h6>', 
     layoutTemplates: {main2: '{preview} {browse}'}, 
     allowedFileExtensions: ["jpg", "png", "gif"] 
    }); 

}

关闭图标的类是.close。

来源

2017-02-18 Rahul

好像东西是错误的：

document.querySelector(".close").style.display="none".

你可以尝试

$('.close').hide();

代替。

来源

2017-02-18 07:38:22 Ditto

隐藏图像上的关闭图标

回答

相关问题