浏览器预览待上传图片

问题

在用户选择图片后，如何在浏览器中预览待上传的图片？

解答

实现图片预览有两种方式：使用 URL.createObjectURL 或 FileReader。两种方法都需要先从 input 元素的 files 集合中获取文件数据。

方式一：URL.createObjectURL

这种方式会为选择的图片生成一个临时的 blob 对象路径。

function imgChange(img) {
  document.querySelector("img").src = window.URL.createObjectURL(img.files[0]);
}

方式二：FileReader

使用 FileReader 读取文件需要四个步骤：

1. 创建 FileReader 对象
2. 调用 readAsDataURL 方法读取文件
3. 监听 onload 事件（因为文件读取是异步的，需要等待读取完成）
4. 通过 result 属性获取读取结果

function imgChange(img) {
  // 创建文件读取对象
  const reader = new FileReader();
  
  reader.onload = function (ev) {
    document.querySelector("img").src = ev.target.result;
  }
  
  // 异步读取文件，结果为 data:url 格式的字符串
  reader.readAsDataURL(img.files[0]);
}

关键点

• 文件数据从 input.files[0] 获取
• URL.createObjectURL 生成临时 blob URL，性能更好，但需要手动释放内存
• FileReader.readAsDataURL 返回 base64 格式的 data URL，可直接用于 img 标签
• FileReader 是异步操作，需要在 onload 回调中获取结果