如何在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中上傳圖片後顯示按鈕？

回答

相關問題