如何解决我该如何使按钮上的文字允许您输入图片,但是当图片上传后消失,如果您不选择照片又回来了?
我该如何使按钮上的文字允许您输入图片,但是当图片上传后消失,如果您不选择照片又回来了?
<label class="btn btn-primary">
<img id="uploadPreview" style="width:200px;height:100px; text-align:right ; border:1px black;" />
<p class="image">Click to upload your pictures</p> <input type="file"id="uploadImage" name="myPhoto" style="display: none;"onchange="PreviewImage();" >
</label>
<script >
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>
解决方法
您可以在onchange="PreviewImage();"
事件上更新按钮可见性样式。
function PreviewImage() {
var oFReader = new FileReader();
var img = document.getElementById("uploadImage");
var btn = document.getElementsByClassName("image")[0];
if (img.files[0]){
btn.style.display = "none"; // hide button
oFReader.readAsDataURL(img.files[0]);
}else{
// uncomment this part if you want to clear image when you don't choose a photo
/* document.getElementById("uploadPreview").removeAttribute('src');
img.value = "";
btn.style.display = "block"; */
}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。