HTML5图片上传前预览通过File API实现：用input[type="file"]选图并校验类型与大小，FileReader读取为Data URL渲染到img标签；多图遍历files数组；预览与上传逻辑分离，上传仍用FormData；注意base64体积增大及移动端accept兼容性。
HTML5 中实现图片上传前的预览，核心是用 File 对象获取文件、FileReader 读取内容、再渲染到 <img> 标签上——整个过程不发请求，纯客户端完成。
选中图片并校验类型与大小
用 <input type="file" accept="image/*"> 限制用户只能选图片，change 事件中检查 file.type.startsWith('image/') 和 file.size <= 5 * 1024 * 1024（例如限制 5MB）。跳过非图片或超大文件，避免后续读取失败。
用 FileReader 生成 Data URL 预览
创建 new FileReader()，监听 onload 事件，调用 readAsDataURL(file)。加载完成后，把 e.target.result 赋给 <img src> 即可显示：
- 适合小图（如头像、缩略图），简单直接
- 注意：base64 字符串体积比原图大 33%，大图建议改用
URL.createObjectURL(file)更省内存 - 若需多图预览，对
event.target.files转数组后遍历处理
把预览和上传逻辑解耦
预览只是本地操作，上传仍需 FormData + fetch 或 XMLHttpRequest：
立即学习“前端免费学习笔记（深入）”；
- 预览阶段不传文件，只展示效果
- 用户确认后，再用同一个
file对象构造FormData，append 进去 - 上传时服务端接收的是二进制流，不是 base64，别混淆两者用途
补充体验细节
预览区域可加 loading 状态（如灰底+旋转图标），防止用户误以为卡住；出错时捕获 onerror 并提示“无法预览该图片”；移动端注意 accept 在部分安卓浏览器中可能失效，建议双重校验 type 和扩展名。
