HTML5移动端文件上传需满足accept明确、用户手势触发、合理设置capture三条件才能稳定唤起选择器；iOS/Android对accept值解析不同，需按平台细化声明并真机测试。
HTML5 在移动端原生支持文件上传，不需要额外插件，但直接照搬 PC 端写法大概率会失败——比如 <input type="file"> 点击无反应、只弹相机不弹文件选择器、iOS 无法多选、安卓部分 WebView 拒绝触发等。
为什么 <input type="file"> 在移动端经常不工作
根本原因不是 HTML5 不支持，而是浏览器对 input[type="file"] 的行为做了差异化限制：
- iOS Safari 默认禁用非
accept明确声明的文件类型（例如漏写accept="image/*"，连相册都不弹） - Android Chrome 80+ 对非用户手势触发的
click()调用静默忽略（比如用setTimeout延迟调用或 JS 主动触发） - 部分国产安卓 WebView（如微信 X5）会拦截
capture属性，或强制跳转拍照而非文件选择 -
multiple在 iOS 12–14 上仅对图片有效，iOS 15+ 才支持文档类多选
必须加的属性组合才能稳定唤起文件选择器
单靠 <input type="file"> 不够，要同时满足三个条件才大概率触发原生选择器：
- 必须有
accept，且值要具体（accept="image/*"可，accept="*"不可） - 必须绑定真实用户点击事件（不能用
label间接触发后 JS 调用click()） - 建议显式声明
capture（仅当需要调用摄像头/相册时），否则留空
<!-- ✅ 推荐写法：按钮直连 input，accept 明确 -->
<button type="button" id="uploadBtn">选择图片</button>
<input type="file" id="fileInput" accept="image/*" capture="environment" style="display:none">
<p><script>
document.getElementById('uploadBtn').addEventListener('click', () => {
// 必须在用户点击回调里调用，不能异步延迟
document.getElementById('fileInput').click();
});
</script>iOS 和 Android 的 accept 值差异要小心
accept 不只是过滤类型，它直接决定系统弹什么界面：
Excel XLSX Formula Cleanup
下载
诊断并修复涉及公式、命名范围、Power Query 刷新、数据透视表、VBA/宏保存等问题的 Microsoft Excel XLSX 工作簿
立即学习“前端免费学习笔记（深入）”；
- iOS：
accept="image/*"→ 弹「照片」App；accept=".pdf,.docx"→ 弹「文件」App（需 iOS 11+） - Android：
accept="image/*"→ 通常弹图库；但若设备没图库 App，可能 fallback 到文件管理器 -
accept="video/*"在 iOS 会强制打开录像，不是相册；要相册视频得用accept="image/*,video/*" - 传 PDF/Excel 等文档，必须写扩展名（
accept=".pdf,.xlsx"），不能只写application/pdf
上传前预览与兼容性兜底要点
移动端上传后常需预览，但 URL.createObjectURL() 在 iOS Safari 14.5+ 有内存泄漏风险，且旧版安卓 WebView 不支持 FileReader 的 readAsDataURL：
- 优先用
<img src="blob:...">预览图片，避免 base64（iOS 有时渲染空白） - 上传大文件（>10MB）时，务必检查
file.size并提示用户，iOS Safari 会静默截断超限文件 - 微信内嵌页（X5 内核）不支持
input[type="file"]的capture，需降级为纯文件选择，并提示“请从手机相册中选取” - 不要依赖
change事件的e.target.files.length判断是否选中——iOS 有时返回空数组但实际已选，应监听input事件并立即读取
真正难的不是“能不能传”，而是“什么时候该弹相册、什么时候该弹文件管理器、用户点了取消怎么识别、WebView 怎么降级”。这些边界情况没有通用解法，得按目标平台逐个测真机。
