HTML5多选图片需用multiple和accept="image/*"，JS读取Array.from(event.target.files)；预览用URL.createObjectURL()并及时revoke；CSS用grid布局+object-fit控制缩略图，防重排与加载失败。
用 input[type="file"] 多选获取图片文件列表
HTML5 支持通过 multiple 属性一次性选中多张图片，但关键在 JS 端要读取 files 对象而非只取第一个。常见错误是写成 event.target.files[0]，结果永远只预览第一张。
实操要点：
- HTML 中必须加
accept="image/*"限定类型，避免用户误选非图文件 -
event.target.files是FileList，不是数组，不能直接用map或展开运算符，需转成数组再处理：Array.from(event.target.files) - 注意移动端 Safari 对多选支持较晚（iOS 16.4+ 才稳定），旧版本可能静默降级为单选
用 URL.createObjectURL() 快速生成预览地址
别用 FileReader 逐个读取 base64——既慢又占内存。对预览场景，URL.createObjectURL(file) 是更轻量的选择，它返回一个指向本地文件的临时 URL，可直接赋给
注意事项：
立即学习“前端免费学习笔记（深入）”；
- 每个
createObjectURL都会占用内存，预览完或切换文件时务必调用URL.revokeObjectURL(url)清理，否则可能引发内存泄漏 - 该 URL 只在当前文档生命周期内有效，刷新页面后自动失效，无需手动清理未使用的
- 不支持跨域访问内容，但纯前端预览无此问题
控制缩略图尺寸与布局避免页面跳动
原始图片尺寸差异大，直接插入会导致 DOM 高度反复重排。批量预览时建议统一用 CSS 控制容器，而非靠 img 自身 width/height 属性。
推荐做法：
- 用
overflow: hidden -
img设width: 100%; height: 100%; object-fit: cover;，确保裁剪居中显示 - 避免用
display: inline-block排列缩略图，改用display: grid或flex，并提前设定列数（如grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))）
处理大图加载失败或超时
部分大体积图片（尤其 WebP 或 HEIC 转换来的）在某些浏览器中可能触发 img.onerror，但不会抛异常，容易被忽略。
稳妥做法：
- 给每张
onerror回调，替换为占位图标或文字提示 - 添加
loading="lazy"属性，让非视口内图片延迟加载，减少初始渲染压力 - 若需限制单图大小（比如 >5MB 不予预览），应在
FileList遍历时检查file.size，提前过滤
真正麻烦的是 iOS 上 input[type="file"] 在微信内置浏览器里可能返回空 files，这不是代码问题，而是 UA 限制，得靠服务端兜底或引导用户换浏览器。
