移除文件时清空图片预览 解决取消文件选择后预览残留问题

你当前代码无法清空旧预览的核心原因：

• 当用户取消选择、清空已选文件时，file.length为0，你在else分支调用fileReader.readAsDataURL()时没有传入要求的File/Blob类型参数，该方法会直接抛出类型错误，绑定的onload回调根本不会执行
• 现有逻辑仅在文件读取成功的回调里修改img的src属性，读取失败/无文件时没有主动重置src，img会一直保留上一次加载的旧图片地址
• 额外隐患：直接使用全局event对象的写法在部分浏览器环境下存在兼容性问题

修复后的JS逻辑 #

function previewImage(event) {
  const fileInput = event.target;
  const previewImg = fileInput.nextElementSibling.querySelector("img");
  const fileList = fileInput.files;

  if (fileList.length) {
    const fileReader = new FileReader();
    fileReader.onload = function(e) {
      previewImg.src = e.target.result;
    };
    fileReader.readAsDataURL(fileList[0]);
  } else {
    // 无有效选中文件时直接清空预览地址
    previewImg.src = "";
  }
}

HTML部分调整 #

仅需要修改文件输入框的onchange绑定，把事件对象作为参数传入函数即可，其余结构无需改动：

<input type="file" id="file1" accept="image/*" class="form-control" onchange="previewImage(event)" required>

• 删除了else分支中无效的FileReader调用，无选中文件时直接重置img的src属性，即时清空旧预览，不会触发JS报错
• 事件对象通过参数传入函数，不再依赖全局event，兼容性更好
• 提前缓存预览图片元素的引用，减少DOM查询，逻辑更易维护

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