Question

用例是，用户可以上传新图像作为个人资料图片。我已经使用了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。

Answer 1

似乎出现了问题：

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

你可以尝试

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

代替。

隐藏图片

1 个答案: