自舉圖像上傳不顯示

Question

我添加了圖像上傳的時刻彈出，我有一些問題的上傳選項。當點擊UPLOAD SPAN標籤圖片無法上傳，而不是在圈內的顯示，並且顯示的上傳按鈕，它不能躲，我怎樣才能使它正確，請大家幫我解決這個問題

感謝

這是我的代碼

.img-upld .img-circle { 
 
    border-radius: 50%; 
 
} 
 
.img-upld .img-circle { 
 
    background:#90b5e0; 
 
} 
 
.img-upld span { 
 

 
    text-align:center; 
 
    width:100%; 
 
    background:white; 
 
    bottom:0; 
 

 
    padding:20px 0; 
 
    opacity:.5 
 
} 
 
.img-upld .img-thumbnail { 
 
    display:inline-block; 
 
    overflow: hidden; 
 
    height: 140px; 
 
    border: 5px solid #fff; 
 
    box-shadow: 0 2px 0 2px #dbdbdb; 
 
} 
 
.imageupload.imageupload-disabled { 
 
    cursor: not-allowed; 
 
    opacity: 0.60; 
 
} 
 
.imageupload.imageupload-disabled > * { 
 
    pointer-events: none; 
 
} 
 
.imageupload .panel-title { 
 
    margin-right: 15px; 
 
    padding-top: 8px; 
 
} 
 
.imageupload .alert { 
 
    margin-bottom: 10px; 
 
} 
 
.imageupload .btn-file { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.imageupload .btn-file input[type="file"] { 
 
    cursor: inherit; 
 
    display: block; 
 
    font-size: 100px; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: right; 
 
    top: 0; 
 
} 
 
.imageupload .file-tab button { 
 
    display: none; 
 
} 
 
.imageupload .file-tab .thumbnail { 
 
    margin-bottom: 10px; 
 
} 
 
.imageupload .url-tab { 
 
    display: none; 
 
} 
 
.imageupload .url-tab .thumbnail { 
 
    margin: 10px 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="d-flex justify-content-center"> 
 
<div class="img-upld"> 
 
      <div class="img-thumbnail img-circle"> 
 
      <div style="position: relative; padding: 0; cursor: pointer;" type="file"> 
 
       <img class="img-circle" style="width: 140px; height: 140px;" > 
 
       <span style="position: absolute; color: red; "> <span>UPLOAD</span> 
 
         <!-- The file is stored here. --> 
 
         <input type="file" name="image-file"></span> 
 
      </div></div> 
 
      </div> 
 
     </div>

Answer 1

請參考上CodePen我的代碼，你需要寫文件讀取方法讀取和查看這是指這link

<input type="file" name="image-file" id="imgupload" style="opacity: 0;"> 
    <a href="#" onclick="$('#imgupload').trigger('click'); return false;"> 
      <div class="img-thumbnail img-circle"> 
      <div style="position: relative; padding: 0; cursor: pointer;"> 
       <img class="img-circle" style="width: 140px; height: 140px;" > 
       <span style="position: absolute; color: red; opacity: 0;"> <span>UPLOAD</span> 
         <!-- The file is stored here. --> 
         </span> 
      </div></div> 
    </a>