目前正在尝试制作一个图像上传程序，而这段代码不是'；不起作用。（我将在*中标记错误） 图片预览 const inpFile=document.getElementById（“inpFile”）； const previewContainer=document.getElementById（“ImagePreview”）； const previewImage=previewContainer*.querySelector（“.image-preview\uu image”）* const previewDefaultText=previewContainer.querySelector（“.image-preview\uu default-text”）； addEventListener（“更改”，函数（）{ const file=this.files[0]； console.log（文件）； });

我得到这个错误。未捕获的TypeError:无法读取null的属性“querySelector”

小心字母大小写

在html中，您有一个带有

id=“imagePreview”

的div，但在脚本中，您试图获取一个带有id

“imagePreview”

的元素

---

Javascript区分大小写，因此

“imagePreview”！==“图像预览”

。尝试在HTML和脚本中设置相同的id，您将获得所需的

previewContainer

元素。

谢谢，瓦迪姆斯！：）

<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
  <img src="" alt="Image Preview" class="image-preview__image">
  <span class="image-preview__default-text">Image Preview</span>
</div>

<script>
    const inpFile = document.getElementById("inpFile");
    const previewContainer = document.getElementById("ImagePreview");
    const previewImage = previewContainer*.querySelector(".image-preview__image");*
    const previewDefaultText = previewContainer.querySelector(".image-preview__default-text");

    inpFile.addEventListener("change", function() {
        const file = this.files[0];

        console.log(file);
    });
</script>