隱藏圖像上的關閉圖標

用例是，用戶可以上傳新圖像作爲個人資料圖片。我爲此使用了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

隱藏圖像上的關閉圖標

回答

相關問題