accept属性仅过滤文件类型，无法限制文件大小；真正校验需在change事件中通过input.files[0].size获取字节值，并结合前端阈值判断与后端双重验证。
accept 属性根本不能限制文件大小
accept 只负责过滤文件类型（如 "image/*"、".pdf"），它对文件体积完全无感。浏览器压根不会读取文件内容，更不会在选择阶段检查大小——这是个常见误解。想靠它拦住 100MB 的视频？不可能。
用 input.files[0].size 在 JS 中实时校验
真正能拿到文件大小的地方，是用户选完文件后触发的 change 事件里：input.files 是一个 FileList，每个 File 对象都有 size 属性（单位字节）。
实操建议：
- 监听
input元素的change事件，别等表单提交才检查 - 立刻读取
event.target.files[0]?.size，注意空文件或取消选择时files可能为空 - 设阈值（比如 5MB =
5 * 1024 * 1024），超限就清空input.value并提示用户 - 别只靠前端校验——后端必须重复验证，否则绕过 JS 就能传任意大小
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file && file.size > 5 * 1024 * 1024) {
alert('文件不能超过 5MB');
e.target.value = ''; // 清空 input，否则下次 change 不触发
}
});配合 accept 做类型 + 大小双重过滤更靠谱
accept 虽然不限大小，但能减少用户误选非目标类型文件的概率，间接降低大文件误传几率。比如上传头像时写 accept="image/*"，比开放所有类型更合理。
注意事项：
-
accept值不是绝对安全的——用户可手动改 HTML 或拖入不匹配类型文件，所以 JS 仍需检查file.type和扩展名 - 某些浏览器（如 Safari）对
accept支持较弱，可能不显示类型筛选对话框 - 移动端 iOS 的文件选择器对
accept响应更严格，但依然不校验大小
大文件上传前要不要预检？看场景
如果业务明确要求「禁止上传超限文件」，那 JS 校验就是必要防线；但如果只是「上传慢了提醒用户」，可以放到上传过程中用 XMLHttpRequest.upload.onprogress 或 fetch 流式读取时判断——不过这时文件已开始发了，体验不如前置拦截好。
容易被忽略的点：
-
input.files是只读的 FileList，无法直接删掉某个文件，只能清空整个value - 用
URL.createObjectURL()预览图片时，记得上传成功后调用URL.revokeObjectURL()防内存泄漏 - IE10+ 支持
size，但老 IE 没FileAPI，需降级处理（不过现在基本不用考虑）
文件大小这事，浏览器只给钥匙，不给锁——JS 得自己把门焊死，再让后端拿另一把锁再焊一次。
