如何实现文件输入框选中图片预览及解决事件绑定null报错

报错与功能失效的核心原因 #

• 元素获取逻辑错误：document.getElementById() 方法仅需传入元素的id字符串本身，不需要添加CSS选择器标识#。你代码里写的getElementById('#myFile')无法匹配到对应元素，返回值为null，后续给null绑定事件自然会抛出读取属性错误。
• 预览赋值逻辑不符合浏览器安全规则：file输入框的value属性返回的是类似C:\fakepath\xxx.jpg的伪本地路径，出于安全限制浏览器不允许网页直接访问该路径加载资源，必须通过FileReader API读取用户选中的本地文件，生成可访问的资源地址才能正常显示预览。

可直接运行的完整实现代码 #

HTML结构（与原代码一致，增加了图片类型限制、预览图默认样式） #

<form action="#" id="submitImg">
    <label for="myFile" id="chooseFileBtn">
        <i class="fas fa-plus"></i>Choose an Image
    </label><br>
    <!-- 增加accept属性限制仅可选择图片文件 -->
    <input type="file" id="myFile" name="filename" hidden accept="image/*">
    <!-- 预览图默认隐藏，设置最大尺寸避免撑破页面 -->
    <img src="#" id="imgPreview" style="max-width: 300px; display: none;">
    <input type="submit" id="submitImage">
</form>

修正后的JavaScript逻辑 #

// 正确获取元素，id前不加#
const chooseImg = document.getElementById('myFile');
const imgPreview = document.getElementById('imgPreview');

chooseImg.addEventListener('change', function(e) {
  // 未选中文件时重置预览状态
  if (!e.target.files || e.target.files.length === 0) {
    imgPreview.style.display = 'none';
    return;
  }
  const selectedFile = e.target.files[0];
  // 校验文件类型，避免非图片文件的异常
  if (!selectedFile.type.startsWith('image/')) {
    alert('请选择图片类型的文件');
    return;
  }
  // 初始化FileReader读取文件内容
  const reader = new FileReader();
  reader.onload = function(loadRes) {
    // 将读取到的base64资源地址赋值给预览图
    imgPreview.src = loadRes.target.result;
    imgPreview.style.display = 'block';
  }
  reader.readAsDataURL(selectedFile);
}, false);

注意：如果你的JavaScript代码写在HTML结构之前，需要将所有获取元素、绑定事件的逻辑放在DOMContentLoaded事件的回调中，等待DOM元素完全加载后再执行，否则依然会出现获取元素为null的问题，示例：

document.addEventListener('DOMContentLoaded', function() {
  // 此处放置上述的元素获取、事件绑定代码
})

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