FileReader是实现本地图片预览的核心API，需监听change事件获取File对象，在onload回调中用readAsDataURL读取并赋值给img.src；注意校验文件类型、避免直接读取路径、大图推荐createObjectURL替代。
用 FileReader 读取本地图片文件并转为 data URL
头像上传预览的核心是不发请求、纯前端完成读取与渲染，FileReader 是唯一可靠选择。它支持异步读取用户选中的 File 对象，且兼容所有现代浏览器（包括 IE10+）。
常见错误是直接拿 input.files[0] 的 path 或 url——这些字段在浏览器中被刻意禁用，读出来是空或虚假路径，无法用于显示。
- 必须监听
input的change事件，再取event.target.files[0] - 仅当
files.length > 0才继续，避免undefined报错 - 建议校验
file.type.startsWith('image/')，防止用户误选非图文件 -
reader.readAsDataURL(file)后，等reader.onload触发，此时reader.result才是可用的data URL
const input = document.querySelector('input[type="file"]');<br>const img = document.querySelector('#avatar-preview');<br><br>input.addEventListener('change', (e) => {<br> const file = e.target.files[0];<br> if (!file || !file.type.startsWith('image/')) return;<br><br> const reader = new FileReader();<br> reader.onload = () => {<br> img.src = reader.result; // 直接赋给 <img> 的 src<br> };<br> reader.readAsDataURL(file);<br>});
设置 <img> 的宽高与裁剪行为避免拉伸变形
预览图若直接塞进固定尺寸容器，容易被拉伸或留白。关键不是靠 CSS 强制缩放，而是控制图像渲染逻辑。
常见问题是只设 width/height，没配 object-fit，导致头像变成“橡皮筋”效果；或者用 background-image 搞复杂化，反而失去 alt 和语义支持。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
<img>标签而非背景图：天然支持加载失败 fallback、可访问性、SEO 友好 - 给
<img>设固定宽高（如120px × 120px），再加style="object-fit: cover;"实现居中裁剪 - 若需圆角头像，用
border-radius: 50%即可，无需额外 canvas 处理 - 别忘了加
alt="头像预览"，提升可访问性
处理大图加载慢或内存占用高的问题
用户上传 5MB+ 的原图时，readAsDataURL 会生成超长 base64 字符串，可能卡顿、甚至触发 Chrome 的内存警告。这不是 bug，是设计限制。
真正有效的缓解方式不是“优化读取”，而是“降级输入”——在读取前就压缩尺寸，而不是等它全量加载完再 canvas 压缩（那更慢）。
- 用
URL.createObjectURL(file)替代readAsDataURL可立即获得临时 URL，速度快、内存低，适合快速预览 - 但注意：
createObjectURL返回的 URL 必须手动URL.revokeObjectURL()释放，否则内存泄漏 - 如果业务强依赖缩略图（比如要上传压缩后版本），才值得上 canvas 绘制 +
toBlob()，否则纯预览场景没必要 - 对移动端尤其要注意：iOS Safari 对大 base64 的解析比 Android 更慢，优先用
createObjectURL
// 更轻量的预览方案<br>reader.onload = () => {<br> // 先释放旧 URL（如果有）<br> if (window.previewUrl) URL.revokeObjectURL(window.previewUrl);<br> window.previewUrl = URL.createObjectURL(file);<br> img.src = window.previewUrl;<br>};
IE11 下 FileReader 不支持 readAsDataURL 的兼容写法
IE11 支持 FileReader，但部分企业环境仍要求兼容。它的问题不是不能读，而是对某些图片格式（如 WebP）或大文件会静默失败，且不抛错。
最稳妥的做法不是硬扛 IE 的缺陷，而是降级为传统表单提交预览（即刷新页面后服务端返回缩略图），但若坚持前端预览，需加兜底判断。
- 检查
reader.readyState === FileReader.DONE且reader.result非空字符串 - 若
reader.result是blob:开头，说明是createObjectURL返回的，IE11 下也支持 - 避免依赖
reader.error：IE11 中该属性常为null，应以结果是否存在为准 - 不要尝试 polyfill
FileReader：DOM 级 API 无法真正补全，不如明确提示“请使用 Chrome/Firefox/Edge”
真正难处理的从来不是读取本身，而是用户上传了 20MB 的 TIFF 扫描件还指望秒出预览——这时候该拦在 input 的 accept 和 onchange 校验里，而不是等 FileReader 崩溃。
