javascript - 用户上传后隐藏上传图片按钮

Question

上传图片后，我想隐藏上传图片按钮....

但是目前还没有隐藏.....

https://codepen.io/kidsdial/pen/RvLexz

<div class="container">

<label for="fileupa" class="customa">
    Upload Image
  </label>
  <input id="fileupa"  type="file" style="display:none;">


  <label for="fileupb" class="customb">
     Upload Image
  </label>
  <input id="fileupb"  type="file" style="display:none;">

<div class="minaimg masked-imga"    >
  <div  >
    <div class="minaimga">

      <img id="target_imga"  alt="">

      <div></div>

    </div>
  </div>
</div>

<div class="minaimg masked-imgb"    >
  <div >
    <div class="minaimgb">

      <img id="target_imgb"  alt="">

      <div></div>

    </div>
  </div>
</div>

</div>

<style>
.container {
    border: 1px solid #DDDDDD;
    width: 612px;
    height: 612px;
    position:relative;
    background:red;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 80px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 180px;
}

.masked-imga

{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  

  width: 259px;
  height: 278px;
  position: absolute;
    top: 221px;
    left: 23px;

}



.masked-imgb 
{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  

    width: 416px;
    height: 388px;

    position: absolute;
    top: 111px;
    left: 173px;

}

.minaimga
{
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb 
{
  display: block;
  background-color: white;
  height: 388px;
}
</style>

<script>
fileupa.onchange = e => {
 target_imga.src = URL.createObjectURL(fileupa.files[0]);   
}

fileupb.onchange = e => {
 target_imgb.src = URL.createObjectURL(fileupb.files[0]);   
}
</script>

如果您需要有关此问题的任何其他信息，请告诉我....

我只需要隐藏上传图片按钮....

请帮我找到解决方案......

提前致谢....

Answer 1

这是更新后的 fiddle :

fileupa.onchange = e => {
  target_imga.src = URL.createObjectURL(fileupa.files[0]);
  document.getElementById('fileupa1').style.display = 'none';
}

fileupb.onchange = e => {
  target_imgb.src = URL.createObjectURL(fileupb.files[0]);
  document.getElementById('fileupa2').style.display = 'none';
}

   .container {
  border: 1px solid #DDDDDD;
  width: 612px;
  height: 612px;
  position: relative;
  background: red;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  top: 350px;
  z-index: 1;
  left: 80px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  top: 350px;
  z-index: 1;
}

.masked-imga {
  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 259px;
  height: 278px;
  position: absolute;
  top: 221px;
  left: 23px;
}

.masked-imgb {
  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 416px;
  height: 388px;
  position: absolute;
  top: 111px;
  left: 173px;
}

.minaimga {
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb {
  display: block;
  background-color: white;
  height: 388px;
}
.button-div{
display: flex;
}
.button-div div{
align-items: center;
width: 50%;
}

<div class="container">

  <div class="button-div">
<div>
    <label for="fileupa" id="fileupa1" class="customa">
        Upload Image
    </label>
    <input id="fileupa" type="file" style="display:none;">
</div>
<div>     
    <label for="fileupb" id="fileupa2" class="customb">
        Upload Image
    </label>
    <input id="fileupb" type="file" style="display:none;">
</div> 
</div> 

  <div class="minaimg masked-imga">
    <div>
      <div class="minaimga">

        <img id="target_imga" alt="">

        <div></div>

      </div>
    </div>
  </div>

  <div class="minaimg masked-imgb">
    <div>
      <div class="minaimgb">

        <img id="target_imgb" alt="">

        <div></div>

      </div>
    </div>
  </div>

</div>