我该如何使按钮上的文字允许您输入图片，但是当图片上传后消失，如果您不选择照片又回来了？

问题描述

我该如何使按钮上的文字允许您输入图片，但是当图片上传后消失，如果您不选择照片又回来了？

<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"; */
  }
  ...