能正常调起文件选择器，取决于系统版本、浏览器内核和HTML触发条件；常见失效原因包括CSS隐藏不当、label与input绑定错误、iOS≤16.3不支持multiple及旧Android WebView忽略accept等。
在平板设备上，<input type="file"> 能否正常调起文件选择器，取决于系统版本、浏览器内核和是否满足基础 HTML 触发条件——不是所有“看起来能点”的按钮都真能触发原生选择器。
为什么点不动或没反应？常见原因直查
平板端文件上传失效，80% 以上是以下三类问题之一：
-
input元素被 CSS 隐藏但未正确透传点击事件（比如用display: none或visibility: hidden，却没用opacity: 0+position: absolute配合z-index覆盖） - 用户点击的是自定义按钮，但没正确触发
input.click()（例如事件绑定在父容器上，但event.target不是按钮；或用了label但for属性没对上id） - iOS Safari ≤ 16.3：即使写了
multiple，也只允许单选；而某些旧版 Android WebView（如 Chrome 90 之前）会忽略accept或禁用相机/相册快捷入口
确保触发成功的最小可行写法
不用框架、不依赖 JS 绑定，也能在绝大多数平板（含 iPadOS、Android 12+）上稳定唤起文件选择器：
<label for="file-upload" style="display: inline-block; padding: 12px 24px; background: #007bff; color: white; border-radius: 4px; cursor: pointer;"> 选择文件 </label> <input type="file" id="file-upload" name="file" accept="image/*,video/*" style="position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;">
关键点：
立即学习“前端免费学习笔记（深入）”；
-
label必须带for，且值与input的id完全一致 -
input不能用display: none—— iOS Safari 会直接禁用其交互能力 -
accept="image/*,video/*"在 iPadOS 上可唤起「照片」+「文件」双入口，在 Android Chrome 中能过滤类型并显示对应图标
移动端特有的兼容性陷阱
有些行为看似合理，实则在平板上会静默失败：
- 用
click()触发input，但不在用户手势（touchend/click）的同步回调里执行 → 浏览器判定为“非用户主动操作”，拒绝唤起选择器 - 把
input放在iframe里 → 大部分平板浏览器禁止跨 frame 文件访问 - 使用
capture="camera"但未加accept="image/*"→ Android 部分厂商定制系统（如三星 One UI）会跳过相机直连，回退到文件选择器 - 表单里混用
enctype="multipart/form-data"和 AJAX 提交 → 若 JS 未拦截默认提交，页面会刷新丢掉状态；若拦截了但没构造FormData，后端收不到文件
最易被忽略的一点：iOS 16.4 之前，multiple 在 Safari 中完全无效，且不会报错、不给提示——你得靠 UA 检测 + 显式提示用户“请逐个上传”或推荐使用 Chrome。这不是代码能绕过的限制，是系统级封锁。
