Question

我正在寻找一种使用JavaScript上传和预览图像的方法，并发现了这篇文章：make simple image preview。现在，我是一名初学JavaScript程序员，我想知道为什么当我尝试将行document.querySelector('img[class='preview']');更改为"document.getElementsByClass('preview')"时，它没有用。

来自：

function filePreview() {
  var preview = document.querySelector('img[class="preview"]');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.onloadend = function(){
    preview.src = reader.result;
  }

  if(file){
    reader.readAsDataURL(file);
  }else{
    preview.src = "";
  }
}

到这个

function filePreview() {
  var preview = document.getElementsByClassName("preview");
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.onloadend = function(){
    preview.src = reader.result;
  }

  if(file){
    reader.readAsDataURL(file);
  }else{
    preview.src = "";
  }
}

HTML

  <div class="uploadimg">
    <input type="file" onchange="filePreview()"><br>
    <img src="" height="300" class="preview" alt="Image preview"><br>
    <img src="" height="200" class="preview" alt="2"><br>
    <img src="" height="150" class="preview" alt="3">
  </div>

我尝试做的是通过尝试将input：file给出的图像设置为所有三个图像源来进行3次预览（Big Medium和Small）

Answer 1

应该是：

document.getElementByClassName("preview");

这将总是返回一个对象数组，因此，如果你只有一个带有“预览”类的DOMElement，你需要：

var preview = document.getElementByClassName("preview")[0];

您可以在此处详细了解此方法： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

为什么这段代码适用于querySelector而不是getElementByClassName？

1 个答案: