一旦我上传的图片,我想隐藏上传图片按钮....
但目前其没有隐瞒.....
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>
请让我知道如果你需要关于此问题的任何其他信息....
什么我需要的是我想隐藏上传图像按钮....
请帮我找到解决方案.....
提前致谢....
以下是更新的小提琴:
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>