浏览器多图上传需设multiple属性和accept="image/*" mime类型，禁用点号后缀写法；预览优先用url.createobjecturl()并及时revoke；多组件共存时用class+closest隔离dom；缩略图布局推荐css grid。
用 multiple 和 accept 控制多图选择范围
浏览器原生支持多图上传，关键就两个属性：multiple 必须加，accept="image/*" 推荐加。不加 multiple 就只能选一张；accept 不写或写成 accept="*" 会导致文件选择框打开极慢（尤其在 macOS Safari 或旧版 Edge），因为系统要扫描所有文件类型。
常见错误是写成 accept=".jpg,.png" —— 这种写法无效，浏览器不识别点号前缀；必须用 MIME 类型，比如 accept="image/jpeg,image/png" 或更宽松的 accept="image/*"。
-
accept="image/webp,image/avif"可以显式支持现代格式，但要注意 Safari 16.4 之前不支持 AVIF - 移动端 Chrome / Safari 对
accept="image/*"响应良好；但部分安卓 WebView 会忽略该属性，得靠 JS 后验 - 别依赖
accept做安全校验——它纯属 UI 提示，用户改个后缀就能绕过
预览容器结构：用 class 替代 id 避免 DOM 冲突
多个上传区域共存时，如果都用 id="preview" 或 id="fileInput"，document.querySelector('#preview') 永远只操作第一个元素。真实项目里常出现“点了第二组上传按钮，图片却跑到第一组预览区”的问题，根源就在这。
正确做法是统一用 class，并在事件监听中基于局部上下文查找：
<div class="upload-group"> <input type="file" class="file-input" accept="image/*" multiple><div class="preview-grid"></div> </div> <div class="upload-group"> <input type="file" class="file-input" accept="image/*" multiple><div class="preview-grid"></div> </div>
JS 中用 el.closest('.upload-group') 定位所属容器，再查 .preview-grid 插入预览图，彻底隔离各组件。
预览方式选 URL.createObjectURL() 还是 FileReader.readAsDataURL()
URL.createObjectURL() 是首选：快、内存可控、无需编码转换。它返回一个临时 blob URL，直接赋给 <img src> 即可显示，毫秒级响应。
FileReader.readAsDataURL() 会把整个文件读进内存并转成 Base64 字符串，大图（如 5MB 的 PNG）容易卡顿甚至 OOM，且生成的字符串体积比原始二进制大 33%。
- 用
createObjectURL时，记得在移除预览或页面卸载前调用URL.revokeObjectURL(url)，否则内存不会释放 - 需要获取图片宽高做裁剪或压缩时，
FileReader不可替代——createObjectURL无法读取元数据 - IE10–11 不支持
createObjectURL，若需兼容，才 fallback 到FileReader
缩略图布局用 CSS Grid 而非 float 或 inline-block
预览图排列看似简单，但 float 容易塌陷、inline-block 有空白间隙、flex wrap 在图片高度不一时会出现错行。CSS Grid 是目前最稳的方案：
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.preview-item img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
}
注意两点：一是用 minmax(180px, 1fr) 让列宽自适应又保底，避免小屏下缩略图被压扁；二是 object-fit: cover 确保不同比例图片都能填满容器且不拉伸变形。
别忘了给每张预览图加唯一 key（比如用 file.lastModified + file.name 拼接），否则 Vue/React 重渲染时可能复用 DOM 导致图片错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
