使用FileReader对象的readAsDataURL方法读取图片文件，生成base64编码的data URL；2. 将该URL赋值给img标签的src属性，实现上传前本地预览；3. 通过监听input的change事件获取文件，结合类型限制与大小检查提升体验。
在HTML5中，可以通过File API中的FileReader对象实现图片上传前的本地预览功能。用户选择图片后，无需上传到服务器，即可通过浏览器快速查看图片内容。
1. 基本原理：FileReader读取本地文件
FileReader是HTML5提供的用于读取文件内容的对象，它支持多种读取方式。对于图片预览，常用的是readAsDataURL方法，该方法将文件读取为一个base64编码的字符串，可以直接作为img标签的src属性使用。
2. 实现步骤
要实现图片预览，需要以下关键步骤：
- 创建一个type="file"的input元素，并设置accept="image/*"限制只选择图片
- 监听input的change事件，获取用户选择的文件
- 使用FileReader对象读取文件
- 将读取结果赋值给img标签显示预览图
3. 示例代码
@@##@@
4. 关键点说明
以下是实现过程中需要注意的地方：
立即学习“前端免费学习笔记（深入）”；
- e.target.files是一个类数组对象，即使只允许单选文件，也需要通过[0]获取第一个文件
- onload事件在读取完成后触发，event.target.result即为生成的data URL
- readAsDataURL适合小图片预览，大文件可能影响性能
- 可以在读取前检查文件类型或大小，提升用户体验
基本上就这些。使用FileReader实现图片预览简单高效，兼容现代主流浏览器，是前端处理本地文件的常用方案。
