iPad Safari通过触发文件选择器，需确保元素可见可点击、使用HTTPS、真实用户点击且无CSS隐藏或sandbox限制。
HTML5 本身不能“让” iPad 支持文件导入，而是利用 iPad 上 Safari（及基于 WebKit 的浏览器）已支持的 功能，在满足特定条件时触发系统级文件选择器。关键不是“加什么功能”，而是“怎么写才有效”。
必须用
iPad Safari 对 的调用非常严格：如果元素被 display: none、visibility: hidden、opacity: 0（且无其他可点击区域透传）、或设置了 disabled，点击将完全无响应——不会报错，也不会弹出选择器。
- 推荐做法：用
position: absolute; left: -9999px移出视口，再用一个可见按钮通过label[for]或 JavaScriptclick()触发它 - 避免用
z-index压在底层后靠pointer-events: none透传，iPad 上不可靠 -
accept属性必须合理，例如accept=".pdf,.jpg,.png"；写成accept="*"或留空，在 iOS 16+ 可能直接禁用选择器
iOS 版本与权限限制直接影响能否唤起选择器
iPadOS 13.4+ 才正式支持从“文件 App”中选取任意文件（此前仅限照片/视频）。但即使系统达标，仍受以下约束：
- 页面必须通过 HTTPS 提供（localhost 除外）；HTTP 页面在 iOS 15+ 起彻底禁用
input[type=file] - 用户必须手动点击（非自动
click()），且该点击需是“可信事件”（即由真实手指触发，非 JS 模拟） - 若页面嵌在
中，父页面需设置sandbox="allow-forms allow-scripts"，否则会被拦截 - 某些 PWA 模式下（
display: standalone），文件选择器可能被降级为仅支持拍照/相册，无法访问文件 App
读取文件内容需用 FileReader，但注意 iPad Safari 的兼容细节
获取到 input.files[0] 后，用 FileReader 读取是标准流程，但 iPad 上有两点易踩坑：
立即学习“前端免费学习笔记（深入）”；
-
FileReader.readAsArrayBuffer()在 iOS 15.4 之前对大文件（>100MB）会静默失败，建议先用file.size做校验并提示用户 -
FileReader.onload回调中，this.result是 ArrayBuffer 或字符串，但this.error在 iPad 上有时为null即使读取失败，应同时监听onerror事件 - 不要依赖
URL.createObjectURL(file)预览 PDF/图片——iPad Safari 对 blob URL 的 PDF 渲染支持不稳定，建议用FileReader.readAsDataURL()后塞进
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
const dataUrl = reader.result;
document.getElementById('preview').src = dataUrl;
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
reader.readAsDataURL(file);
});
真正卡住开发者的地方，往往不是“怎么写代码”，而是 iPad 上那个看似没反应的点击——它既不报错也不弹窗，只默默忽略。确认 HTTPS、确保真实点击、检查 input 是否被 CSS 或 sandbox 意外屏蔽，这三步比写逻辑更重要。
