HTML5怎样限定iPad导入文件大小_HTML5限iPad导入大小法【约束】
iPad Safari中input file无法可靠读取File.size，需用setTimeout延迟校验并服务端强制限制；推荐capture="user"引导小文件来源。
HTML5 的
浏览器原生不支持通过 HTML 属性（如
accept 或自定义属性）在 iPad Safari 中拦截超大文件上传。所谓“前端限制”实际只是表单提交前的 JS 校验，用户仍可绕过 —— 更关键的是，iPad Safari 对 File.size 的读取存在延迟或不可靠行为，尤其在从“文件”App 导入时，files[0].size 可能返回 0 或 undefined，直到文件真正被加载进内存。
用 input.files + File.size 做基础校验，但必须加防抖和 fallback 提示
iPad 上触发 change 事件后，不能立刻读取 size；需监听 load 或用 setTimeout 等待微任务就绪。否则容易误判为“空文件”或跳过检查。
document.getElementById('fileInput').addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
// 防止 iPad Safari 读取 size 失败
setTimeout(() => {
if (!file.size || file.size === 0) {
alert('文件未正确读取，请重试');
e.target.value = ''; // 清空 input，避免重复提交
return;
}
const maxSize = 10 * 1024 * 1024; // 10MB
if (file.size > maxSize) {
alert(`文件不能超过 ${maxSize / 1024 / 1024}MB`);
e.target.value = '';
}}, 100);
});
服务端必须做二次校验，且响应要明确返回 413 或带错误字段的 JSON
iPad 用户可禁用 JS、改写表单、或用开发者工具绕过所有前端逻辑。服务端若只依赖前端传来的文件名或预估大小，极易被超大文件打挂进程或填满磁盘。
- Node.js（Express）中用
multer时，必须设置limits.fileSize，而非仅靠fileFilter - PHP 中需检查
$_SERVER['CONTENT_LENGTH']并配合upload_max_filesize和post_max_sizeini 设置 - 返回给前端的错误应包含明确字段（如
{"error": "file_too_large", "max_size": 10485760}），便于 JS 统一提示
真要“约束导入体验”，得换思路：用 capture="user" + accept 引导小文件来源
iPad Safari 对 capture 属性支持较好，强制调起相机或相册时，生成的图片/视频天然可控（比如拍照一般不会超 5MB）。这比放任用户从“文件”App 拖拽一个 500MB 视频更现实。
注意：capture 不影响文件大小 API，但它把用户引导到更可控的输入路径 —— 这才是 iPad 上最有效的“软性约束”。
真正的硬限制只在服务端生效，而 iPad 的文件系统桥接机制决定了前端永远无法 100% 拦截大小。别在 onchange 里反复轮询 size，也别信“iOS 17 已修复”的传言 —— 它没修，也不会修。
