javascript - Bootstrap 图片上传 不显示

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>