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 点击完全失效。

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

1. 用 change 事件监听，别用 click：document.getElementById('file-input').addEventListener('change', e => { const files = Array.from(e.target.files); });
2. 先检查 files.length 是否为 0 再处理，避免用户取消选择后报错。Array.from() 必须调用，因为 FileList 不能直接 forEach 或 map。
3. FormData 上传时，同名多次 append：for (const file of files) { formData.append('files', file); }——后端接收字段名必须是 'files'，不是 'files[]'，iOS Safari 不识别方括号语法。
4. 调试时打开 Network 面板，查看 Request Payload 里是否列出全部文件条目。如果只有一项，说明前端未正确遍历 files 或 append 逻辑被覆盖。

《夸克》非常好用的免费AI浏览器

下载APP查看