iPhone端Safari浏览器文件输入控件偶发失效问题排查求助

可能的原因 #

• iOS Safari的文件选择器对过长且包含不支持MIME类型的accept列表存在偶发性解析bug，当混合大量图片、视频类型时，底层初始化过程可能出现资源加载异常，导致选择器无法正常唤起。
• 部分指定的MIME类型在iOS原生环境中无支持（如image/bitmap、video/wmv、video/flv、video/mkv），这类无效类型可能干扰选择器的正常逻辑，引发偶发失效。
• multiple属性与多类型accept组合时，iOS Safari的文件选择器可能存在竞态条件，导致部分场景下初始化失败。

解决建议 #

• 精简accept列表：只保留iOS原生明确支持的MIME类型，移除无效类型，示例代码：

  <input multiple accept="image/png, image/jpeg, image/jpg, image/gif, image/webp, image/heic, video/mp4, video/mov, video/webm, video/ogg" type="file">
  

• 拆分输入控件：将图片和视频选择拆分为两个独立的input，避免混合类型带来的解析问题：

  <!-- 图片选择 -->
  <input multiple accept="image/png, image/jpeg, image/jpg, image/gif, image/webp, image/heic" type="file">
  <!-- 视频选择 -->
  <input multiple accept="video/mp4, video/mov, video/webm, video/ogg" type="file">
  

• 排查multiple属性影响：临时移除multiple属性测试，如果问题消失，可考虑通过JavaScript实现多文件选择逻辑，或针对iOS版本做兼容（确认设备是否运行iOS 15及以上版本，旧版本对multiple的支持存在不稳定情况）。
• 检查页面JS干扰：排查页面中是否存在修改input属性、监听click/change事件的代码，部分动态操作可能在iOS上引发选择器冲突，尝试隔离相关代码测试。
• 版本兼容测试：在不同iOS版本的设备上验证问题，若仅特定版本（如iOS 16.x）出现，可考虑添加版本检测的兼容逻辑，或通过CSS/JS调整选择器的唤起方式。

内容的提问来源于stack exchange，提问作者antoine barbet