Javascript 如何使此文本按钮允许您输入图片,但在上传图片时消失,如果您不';你没选照片吗?
我怎样才能使这个文本按钮允许您输入图片,但在上传图片时消失,如果您没有选择图片,则返回Javascript 如何使此文本按钮允许您输入图片,但在上传图片时消失,如果您不';你没选照片吗?,javascript,html,image,file,input,Javascript,Html,Image,File,Input,我怎样才能使这个文本按钮允许您输入图片,但在上传图片时消失,如果您没有选择图片,则返回 <label class="btn btn-primary"> <img id="uploadPreview" style="width:200px;height:100px; text-align:right ; border:1px black;" /> <p class="image&q
<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"; */
}
...
重新格式化的代码