如何在html中上传图片后显示按钮?
问题描述:
我创建了一个包含图像和相关控件(如编辑,删除和添加按钮)的html页面。目的是在默认情况下,只有在上传图像隐藏加按钮并显示编辑和删除按钮后,才需要显示加号图标。但现在的问题是,当鼠标悬停图像时,所有控件都同时显示,并且很难用鼠标单击删除或编辑按钮。如何在html中上传配置文件图片后显示编辑和删除按钮,以及如何在存在默认图片或同一div中没有图片时显示加号图标。 任何人都可以帮助我吗?如何在html中上传图片后显示按钮?
[默认简档图像] [1]
[上传轮廓图像后] [2]
请参阅附加的图像。可以使用jQuery来完成吗?
.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;}
<div class="row">
<div class="add_new_candidate profile_image">
\t <div class="col-md-3">
\t <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">
\t <a href="#"><i class="fa fa-pencil"></i></a>
<a class="profile_add_picture" href="#">
\t <i class="fa fa-plus"></i>
\t <input type="file" class="upload" />
</a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</div>
<div class="col-md-9">
\t <input type="text" class="form-control" placeholder="Full name" >
</div>
</div>
</div>
答
与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>
+0
感谢您的回复Rakesh Soni。可以使用jQuery来完成吗?我修改了这个问题并附上了一些截图。请检查。 – User113
答
使用JavaScript检查图像。 如果是默认的图像显示上传按钮,别的节目编辑,删除按钮
我的示例代码
$(document).ready(function(){
\t showButton(); // check image for show button
\t function showButton() {
\t \t var default_image_name = 'anonymous_avatar.png'; // default image name
\t \t var image_now = $('#image-show img').attr('src');
\t \t //default name indexof != -1
\t \t if(image_now.indexOf(default_image_name) != -1){
\t \t \t DefaultImageButton();
\t \t } else {
\t \t \t ChangeImageButton();
\t \t }
\t }
\t function DefaultImageButton(){
\t \t $('#BtnUpload').show();
\t \t $('#BtnEdit').hide();
\t \t $('#BtnDel').hide();
\t }
\t function ChangeImageButton(){
\t \t $('#BtnUpload').hide();
\t \t $('#BtnEdit').show();
\t \t $('#BtnDel').show();
\t }
});
#BtnEdit, #BtnDel{
\t width: 30px;
\t height: 30px;
\t color: white;
\t }
\t #BtnEdit{
\t background-color:blue;
\t }
\t #BtnDel{
\t background-color:red;
\t }
<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>
\t <input id="BtnUpload" type="file" accept ="image/*">
\t <div id="BtnEdit">Edit</div>
\t <div id="BtnDel">Del</div>
</div>
如果妳做图像(上传做过某事,删除,... )你只需要拨打showButton()
对不起,我不明白这个问题。也许如果你写得更清楚... – xale94
在你的解释中加入一张图片会很有帮助。 –
如果你能制作一个可运行的代码片段,它会比图片更有帮助 - 我们中的一些人支持公司代理,并且无法在SO上查看图像。 –