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

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 、returns 是一个数组而不是元素本身，因此将其更改为 id 即可。

如果您想使用类名，请按如下方式操作：

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

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

Display image then replace uploaded image

javascript

image

display