用户上传后隐藏“上传图片”按钮

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

这是更新的小提琴：

 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>