无需使用监听器，如何在HTML中构建可切换显示图片的文件选择器？

很简单，咱们直接利用HTML元素自带的onchange事件属性就能搞定，不用写额外的addEventListener监听器。具体操作如下：

修改你的HTML代码 #

给文件选择框添加onchange属性，绑定一个预览函数：

<img src="images/defaultProfile.jpg" id="image"> 
<input type="file" name="pic" accept="image/*" id="imgPath" onchange="previewImage()"> 
<input type="submit" onclick="uploadImg()">

添加预览函数到你的JavaScript文件 #

在你的JS代码里加入这个previewImage函数，用来处理图片预览逻辑：

function previewImage() {
  // 获取文件输入框和图片元素
  const fileInput = document.getElementById('imgPath');
  const imageElement = document.getElementById('image');
  
  // 拿到用户选中的第一个图片文件
  const selectedFile = fileInput.files[0];
  
  if (selectedFile) {
    // 创建FileReader对象读取本地文件
    const reader = new FileReader();
    reader.onload = function(e) {
      // 把读取到的图片DataURL赋值给img元素的src，实现预览
      imageElement.src = e.target.result;
    };
    // 以DataURL格式读取文件
    reader.readAsDataURL(selectedFile);
  }
}

原理说明 #

• 当用户通过文件选择框选中图片时，文件输入框的内容发生变化，触发onchange事件，直接调用previewImage函数。
• FileReader会把选中的本地图片文件转换成Base64格式的DataURL，这个URL可以直接作为img元素的src值，从而实现即时切换显示图片。
• 这个操作完全不影响你原来的uploadImg()上传逻辑，提交按钮依然可以正常用来上传图片。

内容的提问来源于stack exchange，提问作者user9724045