使用FileReader可实现图片上传前的本地预览：监听input[type="file"]的change事件，取e.target.files[0]获取文件，调用readAsDataURL()转为Data URL后赋给img.src。
直接用 FileReader 读取用户选择的图片文件，转成 Data URL 后赋给 <img alt="HTML5 中怎么结合 FileReader API 在前端实现图片文件上传前的本地预览效果" > 的 src 属性，就能实现上传前的本地预览——不发请求、不走后端、纯前端完成。
监听文件输入变化并获取文件
关键在于绑定 input[type="file"] 的 change 事件，从 e.target.files 中拿到 File 对象（注意：它是一个类数组，通常取 [0] 获取第一个选中的图片）：
- 确保
accept属性限制为图片类型，如accept="image/*" - 建议加
multiple属性支持多图，但预览逻辑需遍历files - 可先检查
files.length是否大于 0，避免无文件时出错
用 FileReader 读取并转为预览地址
FileReader 的 readAsDataURL() 方法会把文件内容编码为 base64 字符串，读取完成后在 onload 回调里拿到结果：
- 创建
new FileReader()实例 - 监听
reader.onload = e => { img.src = e.target.result } - 调用
reader.readAsDataURL(file)开始读取 - 若需错误处理，可监听
reader.onerror
将结果展示在页面上
预览区域一般用一个空的 <img alt="HTML5 中怎么结合 FileReader API 在前端实现图片文件上传前的本地预览效果" > 标签，或动态创建；也可以配合 <canvas></canvas> 做缩放/裁剪，但基础预览只需设置 src：
立即学习“前端免费学习笔记（深入）”；
- 提前在 HTML 中写好
<img id="preview" alt="HTML5 中怎么结合 FileReader API 在前端实现图片文件上传前的本地预览效果" >，JS 中用document.getElementById('preview')获取 - 为提升体验，可在读取前清空旧预览（如
img.src = ''），或显示加载状态 - 移动端注意设置
img的max-width: 100%防止溢出
完整简易示例（可直接运行）
HTML 部分：
JS 部分：
const fileInput = document.getElementById('fileInput');const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = function(evt) {
preview.src = evt.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
});
不复杂但容易忽略。
