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

iOS Safari多选失效是因版本兼容性限制：iOS 16.4起才原生支持multiple属性，旧版本需降级单选+重置value，新版须确保input含type="file"和multiple且正确渲染，并用label包裹+clip隐藏替代display:none。

用户在Safari浏览器中点击文件上传框后只能选一个文件，反复尝试仍无法多选——这不是前端逻辑写错了，而是iOS Safari对multiple属性的版本兼容性限制与DOM交互机制共同导致的。从iOS 16.4起才原生支持multiple多选，旧版本需降级为单选+分批上传，且必须避开display:none等隐藏方式触发失败陷阱。

确认当前iOS Safari是否支持multiple

打开设置→通用→软件更新，查看设备系统版本：若低于iOS 16.4，【Safari根本不解析multiple属性，加了也无效】；若为iOS 16.4或更高，继续检查HTML写法是否合规。

在网页源码中定位input标签，确认是否同时满足两个条件：type="file" + multiple属性显式存在，例如<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+）

用navigator.userAgent匹配iOS版本号：
const ua = navigator.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逻辑被覆盖。