如何在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>

来源

2017-05-04 User113

对不起，我不明白这个问题。也许如果你写得更清楚... – xale94

在你的解释中加入一张图片会很有帮助。 –

如果你能制作一个可运行的代码片段，它会比图片更有帮助 - 我们中的一些人支持公司代理，并且无法在SO上查看图像。 –

与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>

来源

2017-05-04 14:11:21

感谢您的回复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()

来源

2017-05-05 06:09:36

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

回答

相关问题