核心是识别环境、分层控制、主动降级：ios严格沙盒限制，android厂商/webview差异大，windows相对标准；重点收敛ios与android差异，通过ua+特性检测判断环境，按场景定向兼容（如拍照用accept="image/*" capture="camera"，多图上传在微信降级为连续点击），js层统一处理文件上传流程。
在 H5 中处理 input[type="file"] 的跨系统兼容性，核心不是“写一套代码适配所有平台”，而是识别环境、分层控制、主动降级。iOS、Android 和 Windows（主要指桌面 Chrome/Edge）三者行为逻辑完全不同：iOS 严格沙盒限制调用路径；Android 厂商和 WebView 差异大；Windows 桌面浏览器相对标准但仍有细节偏差。实际开发中，Windows 兼容性问题远少于移动端，重点应放在 iOS 与 Android 的差异收敛上。
明确各系统基础行为边界
不加任何属性时，默认行为已存在根本区别：
- iOS Safari / 微信 / QQ：
accept="image/*"会同时弹出「拍照」和「相册」选项（但微信内multiple强制失效，仅单选） - Android 原生浏览器 / Chrome：同样支持双入口，但部分低版本 UC 或定制 ROM 可能忽略
accept，直接打开全文件管理器 - Windows 桌面浏览器：完全遵循 HTML 标准，
multiple、capture、accept均有效，无系统级拦截
用 UA + 特性检测双重判断运行环境
仅靠 User-Agent 字符串不可靠（尤其微信/QQ 内置 WebView 经常伪造），需结合特性检测：
- 检测是否支持
capture：创建临时 input 元素，设capture="user"后检查其getAttribute("capture")是否返回字符串值 - 检测是否为 iOS：用正则
/iPad|iPhone|iPod/.test(navigator.userAgent)，比单纯查Mac OS X更准（避免误判 macOS 桌面 Safari） - 检测是否为微信：查
navigator.userAgent.includes("MicroMessenger")，注意微信安卓/iOS 内核不同，行为也不同
针对关键场景做定向兼容策略
不要试图让所有平台表现一致，而是按场景提供合理 fallback：
-
只想要拍照：用
accept="image/*" capture="camera"，iOS/Android 微信均直启相机；但需提示用户——QQ 安卓可能仍弹 ActionSheet，此时加按钮引导「点击拍照图标」更稳妥 -
允许多图上传：iOS Safari 支持
multiple，但微信强制单选；可先尝试启用multiple，捕获微信环境后自动切换为「连续点击上传」交互模式 -
上传非图片文件（如 PDF/Excel）：iOS Safari 对
accept=".pdf"支持弱，常忽略并打开所有文件；建议改用accept="application/pdf"，并在安卓/Windows 端补充 MIME 类型校验 JS 层过滤
统一上传流程，屏蔽底层差异
无论用户从哪来，最终都走同一套 JS 处理链：
- 监听
change事件，读取e.target.files - 对 iOS 微信返回的压缩图，用 Canvas 重绘还原原始分辨率（需判断
file.size 且 <code>isWechat()为真） - 上传前统一生成唯一 ID、记录来源（camera / album / file），便于后续埋点与问题归因
