Question

我想上传图片，（但首先）点击图片（输入按钮上传图片）显示按钮，然后更换新的图片ON按钮图片。

功能displayUploadimages不起作用，但如果我将“ Class ”更改为“ Id ”，则所有代码都可以正常工作。

此处代码：

  <div class="detail_left">
    <div class="Take">
      <div class="image-upload" onclick="displayUploadimages()">
       <label for="file-input">
         <div class="takes backgrounds"></div>
       </label>
      </div>
      <img class="Uploaded" src="#" alt="">
     </div>
  <input id="file-input" class="" type="file" onchange="readURL(this);"/>

 <script type="text/javascript">function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.Uploaded')
                .attr('src', e.target.result)
                .width(350)
                .height(350);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
function displayUploadimages() {
          document.getElementsByClassName("image-upload").style.display = "none";
          }
</script>

Answer 1

由于方法document.getElementsByClassName返回一个数组而不是元素本身，因此将其更改为id将起作用。

如果您想使用classname，请按以下步骤操作：

var elements = document.getElementsByCLassName('image-upload');
for(var i = 0; i < elements.length; i++){
     elements[i].style.display = "none";
}

显示图像然后替换上传的图像

1 个答案: