HTML属性Multiple与Accept的组合应用：实现多选文件上传

multiple属性仅对type="file"有效，缺type或赋值false均失效；accept仅为提示，需JS二次校验；files是FileList非数组，须转Array.from；移动端多选支持有限，顺序不保证。

multiple 属性不生效？检查是否遗漏了 type="file"

单独写 multiple 但没配 <input type="file">，浏览器直接忽略该属性。它只对文件输入控件起作用，type="text" 或 type="email" 加了也白加。

常见错误写法：<input multiple>（缺 type）或 <input type="file" multiple="false">（布尔属性不能赋值，写了 false 反而被当成真值）。

正确写法只有两种等效形式：<input type="file" multiple> 或 <input type="file" multiple="">。

accept 属性过滤失效？注意 MIME 类型与扩展名的匹配逻辑

accept 不是硬性拦截，只是提示浏览器弹出文件选择器时默认筛选类型。用户仍可手动切换“所有文件”并选中不符合的文件——后续必须在 JS 中二次校验。

立即学习“前端免费学习笔记（深入）”；

常见误区：

• accept=".pdf,.docx" 看似直观，但部分安卓 WebView 或旧版 Safari 对扩展名支持不稳定，优先用 MIME 类型
• accept="image/*" 能匹配 jpg、png，但不保证包含 webp（需显式加 image/webp）
• accept="video/*" 在 iOS 上可能漏掉某些编码格式的 MP4，建议补全 accept="video/mp4,video/quicktime"

实操建议：用逗号分隔多个 MIME 类型或扩展名，如 accept="image/jpeg,image/png,.jpg,.png"，兼顾兼容性与语义清晰。

multiple + accept 组合后，input.files 的结构没变，但长度可能为 0

即使加了 multiple 和 accept，用户没选任何文件，event.target.files 仍是空的 FileList（.length === 0）。别假设它至少有一个文件。

JS 处理时典型陷阱：

• 直接取 files[0] 而不判空，导致 undefined 错误
• 用 for...of 遍历 files，但忘了它不是数组，不支持 map、filter，得先转成数组：Array.from(files)
• 上传前未检查单个文件大小，files[i].size 单位是字节，10MB 要写成 10 * 1024 * 1024

移动端多选文件的实际限制比文档写的更严

iOS Safari 直到 iOS 16.4 才真正支持 multiple（之前点选一个就关闭选择器）；Android 各厂商定制系统对多选的支持程度不一，有些仅允许一次选一个，但允许重复点击添加。

这意味着：

• 不能依赖 UI 层显示“已选 5 个文件”，得靠 files.length 动态更新
• 不要禁用输入框或覆盖默认按钮——自定义按钮容易破坏原生多选行为
• 如果业务强依赖多选，需降级方案：比如允许用户分多次上传，用 sessionStorage 缓存已上传的文件名，最后合并提交

最易被忽略的一点：哪怕 multiple 生效了，input.files 里文件的顺序也不保证和用户选择顺序一致，尤其跨目录选取时。需要排序就得按 lastModified 或自行记录索引。