Question

我创建了一个包含图像和相关控件的html页面，例如编辑，删除和添加按钮。目的是在默认情况下，您只需要显示加号图标，上传图像后隐藏加号按钮并显示编辑和删除按钮。但现在的问题是，当悬停图像时，所有控件都同时显示，并且鼠标单击删除或编辑按钮很困难。如何在html上传个人资料图片后显示编辑和删除按钮，以及当有默认图片或同一个div中没有图片时如何显示加号图标。任何人都可以帮助我吗？

[默认个人资料图片] [1]

[上传个人资料图片后] [2]

请参阅附图。可以使用jquery完成吗？

＆＃13;

.profile_image {position: relative; padding: 0px 40px; margin-bottom: 40px;}
    .add_new_candidate {margin: 20px 10px;}
    .profile_img_ctrls {position: absolute; width: 100%; height: 100%; display: none;}
    .profile_img_ctrls a {background: #8aa2ad; border-radius: 50%; width: 20px;  height: 20px; float: left; text-align: center; color: #fff; margin-right: 15px;}
    .profile_add_picture {width: 30px !important; height: 30px !important; margin-top: -8px; position: relative; overflow: hidden;}
    .add_new_candidate input {margin-top: 45px; font-size: 20px; font-weight: bold;}
    .profile_add_picture input.upload {position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0);}
    .profile_add_picture i {font-size: 20px; padding-top: 5px;}

＆＃13;

<div class="row">
                        <div class="add_new_candidate profile_image">
                        	<div class="col-md-3">
                            	<img class="img-responsive img-circle" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" >
                                <div class="profile_img_ctrls">
                                	<a href="#"><i class="fa fa-pencil"></i></a>
                                    <a class="profile_add_picture" href="#">
                                    	<i class="fa fa-plus"></i>
                                    	<input type="file" class="upload" />
                                    </a>
                                    <a href="#"><i class="fa fa-trash"></i></a>
                                </div>
                            </div>
                            
                            <div class="col-md-9">
                            	<input type="text" class="form-control" placeholder="Full name" >
                            </div>
                        </div>
                    </div>

＆＃13;

Answer 1

只需使用css选择器。基本上将defaut-image类添加到默认图像，并在用户上传图像并使用下面的代码时将此类更改为user-image

<强> 1。当有默认图像

时

.profile_img_ctrls a{
    display: none
}
.default-image + .profile_img_ctrls .profile_add_picture {
   display: inline-block;
}

<div class="row">
    <div class="add_new_candidate profile_image">
        <div class="col-md-3">
           <img class="img-responsive img-circle defaut-image" src="dist/img/avatar.png" >
           <div class="profile_img_ctrls">
               <a href="#"><i class="fa fa-pencil"></i></a>
               <a class="profile_add_picture" href="#">
                   <i class="fa fa-plus"></i>
                   <input type="file" class="upload" />
               </a>
               <a href="#"><i class="fa fa-trash"></i></a>
           </div>
      </div>
            
      <div class="col-md-9">
          <input type="text" class="form-control" placeholder="Full name" >
      </div>
   </div>
   </div>
</div>

<强> 2。当用户更改图片

时

.user-image + .profile_img_ctrls a {
    display: inline-block;
}

<div class="row">
   <div class="add_new_candidate profile_image">
       <div class="col-md-3">
           <img class="img-responsive img-circle user-image" src="dist/img/avatar.png" >
           <div class="profile_img_ctrls">
               <a href="#"><i class="fa fa-pencil"></i></a>
               <a class="profile_add_picture" href="#">
                   <i class="fa fa-plus"></i>
                   <input type="file" class="upload" />
               </a>
               <a href="#"><i class="fa fa-trash"></i></a>
           </div>
       </div>

       <div class="col-md-9">
           <input type="text" class="form-control" placeholder="Full name" >
       </div>
   </div>
  </div>
</div>

Answer 2

使用Javascript检查图片。如果是默认图像显示上传按钮，则显示编辑，del按钮

我的示例代码

＆＃13;

$(document).ready(function(){
	showButton(); // check image for show button

	function showButton() {
		var default_image_name = 'anonymous_avatar.png'; // default image name
		var image_now = $('#image-show img').attr('src');
		//default name indexof != -1
		if(image_now.indexOf(default_image_name) != -1 ){
			DefaultImageButton();
		} else {
			ChangeImageButton();
		}
	}

	function DefaultImageButton(){
		$('#BtnUpload').show();
		$('#BtnEdit').hide();
		$('#BtnDel').hide();
	}
	function ChangeImageButton(){
		$('#BtnUpload').hide();
		$('#BtnEdit').show();
		$('#BtnDel').show();
	}
});

＆＃13;

#BtnEdit, #BtnDel{
	  width: 30px;
	  height: 30px;
	  color: white;
	}
	#BtnEdit{
	  background-color:blue;
	}
	#BtnDel{
	  background-color:red;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div id="avatar-frame">

  <div id="image-show"><img src="https://jnswire.s3.amazonaws.com/jns-media/ea/05/91552/anonymous_avatar.png"></div>
	<input id="BtnUpload" type="file" accept ="image/*">
	<div id="BtnEdit">Edit</div>
	<div id="BtnDel">Del</div>

</div>

＆＃13;

如果您对图片做了一些事情（上传完成，删除，......），您只需要致电showButton()

如何在html上传图片后显示按钮？

2 个答案: