html原生支持多选上传需显式使用，仅此即可触发系统级多选对话框；multiple是布尔属性，type必须为file，缺一不可，accept仅提示类型不影响多选功能。
HTML原生如何支持多选上传
浏览器原生支持多选文件上传，不需要额外 JS 库或框架。关键在于 multiple 属性必须显式添加，且 type 必须为 file —— 仅靠 JS 模拟无法触发系统级多选对话框。
常见错误是只写 <input type="file"> 却漏掉 multiple，结果点击后只能选一个文件；或者误加 accept="image/*" 后发现 iOS Safari 不弹出相册（实际是兼容性问题，见下文）。
-
multiple是布尔属性，写上即生效，无需赋值（multiple="true"反而冗余） -
accept仅作提示和过滤，不强制限制，但影响移动端调起的原生选择器类型（如accept="image/*"在 Android Chrome 会优先显示图库，在 iOS Safari 则可能 fallback 到文件选择器） - 若需限定图片格式，建议用
accept="image/jpeg,image/png,image/webp"而非宽泛的image/*，iOS 更可靠
为什么iOS Safari点不了“相册”或只显示“照片”没“所有相册”
iOS Safari 对 input[type=file] 的行为有严格限制：它不直接暴露系统相册层级结构，而是通过系统相册 App 提供统一入口。是否显示“所有相册”取决于用户设备设置和 iOS 版本，前端无法控制。
真正影响体验的是 capture 和 accept 的组合。单独设 accept="image/*" 在 iOS 上大概率只唤起“照片”App 的“最近项目”，而非完整相册列表；加上 capture="environment" 反而会强制调起相机。
- 想尽可能唤起图库选择界面：用
accept="image/*" multiple，不加capture - 若用户需要从“所有相册”选图，必须手动在照片 App 内切换——这是 iOS 系统级限制，不是代码缺陷
- 测试时务必真机验证，模拟器常返回空文件列表或静默失败
拿到文件列表后怎么预览缩略图并校验大小/格式
用户多选后，input.files 返回的是 FileList 对象（类数组，不可直接用 map），需转成数组再逐个处理。缩略图生成依赖 URL.createObjectURL()，但注意每次调用都会创建内存引用，不手动释放会导致内存泄漏。
常见校验陷阱：用 file.type 判断图片类型不可靠（上传时可能为空或被篡改），应优先读取文件头（magic number）或用 file.name 后缀 + MIME 类型双重判断；文件大小单位是字节，1MB = 1048576 字节，不是 1000000。
- 安全预览缩略图：
const url = URL.createObjectURL(file); img.src = url;，上传成功后记得URL.revokeObjectURL(url) - 检查是否为图片：
/^image\//.test(file.type) || /\.(jpe?g|png|webp|gif)$/i.test(file.name) - 限制单图不超过 5MB：
if (file.size > 5 * 1024 * 1024) { /* 提示 */ }
上传到后端时 FormData 怎么正确携带多个文件
关键点在于 FormData.append() 的第三个参数：如果传入 file.name，后端收到的字段名就是该文件名；如果不传，浏览器默认用 "blob"，容易导致后端解析失败。尤其当后端用 Express + multer 或 Django request.FILES 时，字段名必须与服务端约定一致。
另一个易错点是把多个文件塞进同一个 key 下却没让后端知道这是数组——其实不用特殊处理，FormData 天然支持同名多值，后端框架通常自动聚合成列表（如 req.files['photos'] 在 multer 中就是数组）。
- 推荐写法：
formData.append('photos', file, file.name)（'photos'是后端约定的字段名） - 避免写
formData.append('photos[]', file)—— 方括号是 PHP 风格，现代 Node/Python/Go 后端不识别 - 上传前可打印
console.log([...formData.entries()])确认数据结构
多选上传真正的复杂点不在 HTML 标签本身，而在于跨平台行为差异、内存管理细节和后端字段约定。iOS 相册路径不可控，缩略图 URL 忘记释放，FormData 字段名和服务端不匹配——这三个地方出错，调试起来最耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
