iPad 上 input type="file" 卡顿主因是iOS沙盒限制与原生文件选择器进程切换，需避免CSS隐藏、用opacity:0覆盖按钮、优先click事件绑定、多图声明multiple/accept、拍照场景用capture属性直连相机、大图预览用URL.createObjectURL()、上传改用fetch+AbortController控制超时。
为什么 input type="file" 在 iPad 上选文件总卡顿或不触发？
根本原因不是 HTML5 本身慢，而是 iOS 系统对 input type="file" 的沙盒限制和 UI 调度策略：它必须唤起原生文件选择器（“文件”App 或“照片”），这个过程涉及进程切换、权限校验和缩略图预生成，尤其在相册含大量 HEIC/ProRAW 图片时明显延迟。
常见现象包括：click() 无效、change 事件不触发、选中后页面无响应、多次点击才弹出选择器。
- 确保
input元素**未被 CSS 隐藏（如display: none或visibility: hidden）**，iOS 只响应「可交互可见元素」的点击；改用opacity: 0; position: absolute;覆盖按钮更可靠 - 避免在
touchend外的时机调用input.click()，优先绑定到click事件，或使用ontouchstart+setTimeout延迟 100ms 再触发 - 若需支持多图，明确声明
multiple和accept="image/*,video/*"，否则 iOS 可能默认只开「照片」而不显示「文件」选项卡
用 capture 属性跳过文件选择器直连摄像头
当业务场景是「拍照上传」而非「从相册选图」，capture 是最有效的提速手段——它绕过整个文件系统 UI，直接启动相机，耗时从平均 2.3 秒降至 0.4 秒内。
注意：iOS 16+ 才完整支持 capture="user"（前置）和 capture="environment"（后置），旧版本仅识别 capture（无值）并默认后置。
立即学习“前端免费学习笔记（深入）”；
<input type="file" accept="image/*" capture="environment" id="camera-input">
-
capture仅对type="file"且accept包含image/*或video/*有效 - 不能与
multiple共存，iOS 会忽略capture - 部分企业内网环境可能因 MDM 策略禁用相机访问，需提前检测
navigator.mediaDevices.getUserMedia是否可用
用 URL.createObjectURL() 预览大图不卡顿
iPad Safari 对 FileReader.readAsDataURL() 处理 5MB+ 图片时极易假死，因为 base64 编码会吃光内存。正确做法是跳过编码，用对象 URL 直接绑定 <img> 的 src。
关键点：对象 URL 是引用，不是拷贝，无需额外内存；且 iOS 对其加载做了底层优化。
const input = document.getElementById('file-input');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
// 记得在后续释放：URL.revokeObjectURL(url)
}
});
- 务必在不再需要预览时调用
URL.revokeObjectURL(url)，否则内存泄漏会导致 iPad 页面频繁崩溃 - 对象 URL 无法跨页面/iframe 使用，也不适用于后续上传（服务端不认这个地址）
- 若需压缩图片，应在
createObjectURL后用canvas绘制并toBlob()，而非先读取为 dataURL
上传前用 fetch() + FormData 控制分块与超时
iPad Safari 的 XMLHttpRequest 在弱网下易卡在 pending 状态，且无原生分块支持。改用 fetch 可精确控制请求生命周期，并配合 AbortController 实现超时中断。
特别是处理视频等大文件时，单次上传失败率高，分块虽增加逻辑复杂度，但成功率提升明显。
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30秒超时
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData,
signal: controller.signal
})
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') console.log('上传超时');
});
- iOS 15.4+ 才支持
fetch上传大文件（>100MB），旧版本仍需降级到XMLHttpRequest -
FormData中的file必须是原始File对象，不能是Blob（Safari 会报错TypeError: Type error） - 服务端需正确解析
multipart/form-data，且 Nginx/Apache 要调大client_max_body_size和timeout
capture 最快；混合来源（相册+文件App）必须接受系统级延迟；大文件上传则分块和超时控制比前端 UI 优化更重要。别在 input 样式上过度折腾，先确认流程是否真卡在前端。 
