Safari浏览器如何解决网页中Input File文件上传框无法选择多个文件？

iOS Safari 多选失效？别急着怀疑代码——先看看系统和标签写对了没有。很多开发者反馈，在苹果手机上点开文件上传框，只能选一个文件，反复测试依然如此。其实问题不在前端逻辑，而是 iOS Safari 对 multiple 属性的支持存在版本兼容性限制，再加上 DOM 交互机制的一些“坑”。从 iOS 16.4 开始，Safari 才原生支持多选；旧版本需要降级为单选+分批上传，而且必须避开 display:none 这类隐藏方式，否则直接触发失败。

确认当前 iOS Safari 是否支持 multiple

先查系统版本：打开设置 → 通用 → 软件更新，看看设备跑的是哪个版本。如果低于 iOS 16.4，Safari 根本不解析 multiple 属性，加了也白加。如果版本是 16.4 或更高，那继续检查 HTML 写法是否合规。

在网页源码中找到 input 标签，确认两个条件同时满足：type="file" 加上 multiple 属性显式存在，比如 ——缺一不可。注意， 或者 都是无效的。

用真机访问同一页面，在控制台执行 document.querySelector('input[type="file"][multiple]')，如果返回 null，说明 HTML 并未正确渲染该标签——可能是 Vue/React 框架异步挂载还没完成。

修复 iOS Safari 下 multiple 失效的三种方法

方法一：强制降级为单文件选择（兼容 iOS 15 及更早）

直接移除 multiple 属性，改用循环触发机制：，每次 change 事件后手动重置 input.value = ''，这样用户就可以连续点击选择下一个文件。注意，必须清空 value，否则重复选同一个文件时 change 事件不会触发。

方法二：检测版本后动态启用 multiple（推荐 iOS 16.4+）

用 na vigator.userAgent 匹配 iOS 版本号：

const ua = na vigator.userAgent;
const iOSVersion = parseFloat(ua.match(/OS (\d+)_(\d+)_?(\d+)?/)?.[1] || '0');
if (iOSVersion >= 16.4) {
  document.getElementById('file-input').setAttribute('multiple', '');
}

方法三：用 label 包裹 + clip 隐藏实现视觉一致的多选入口

将 input 嵌入 label 内，label 设置可见样式（比如背景色、边框），input 只保留 position: absolute; clip: rect(0 0 0 0);——这是 W3C 无障碍标准认可的隐藏方式，Safari 允许它触发，并且支持 multiple。

关键陷阱：不要给 label 加 pointer-events: none，否则 iOS Safari 点击完全失效。

确保多文件被正确读取和上传

① 用 change 事件监听，别用 click：document.getElementById('file-input').addEventListener('change', e => { const files = Array.from(e.target.files); });

② 先检查 files.length 是否为 0 再处理，避免用户取消选择后报错；Array.from() 必须调用，因为 FileList 不能直接 forEach 或 map。

③ FormData 上传时，同名多次 append：for (const file of files) { formData.append('files', file); }——后端接收字段名必须是 'files'，不是 'files[]'，iOS Safari 不识别方括号语法。

④ 调试时打开 Network 面板，查看 Request Payload 里是否列出全部文件条目；如果只有一项，说明前端未正确遍历 files 或 append 逻辑被覆盖。