前端仅能通过JavaScript在change事件中检查file.size做体验优化，必须清空input值并用data-max-size灵活配置；后端需在Nginx、框架、语言层三重设硬限制，否则易导致413或服务崩溃。
前端无法真正限制上传图片大小，accept 属性完全不处理尺寸，唯一能做的只是在用户选完文件后、提交前用 JavaScript 检查 file.size 并阻止表单动作——这层检查纯属体验优化，绕过它太容易了。
用 change 事件读取 file.size 做即时拦截
必须在 input[type="file"] 的 change 事件里检查，而不是等到 submit。否则用户可能已选中一个 2GB 视频，点提交后才弹错，体验极差。
-
file.size单位是字节，5MB 要写成5 * 1024 * 1024，别用5e6这类易读性差的写法 - 校验失败时，除了
alert或 DOM 提示，一定要执行e.target.value = ''清空 input 值，否则重复选择同名文件不会再次触发change - Safari 旧版或某些 WebView 可能返回
file.size === 0，加个兜底判断：if (!file || !file.size)
用 data-max-size 实现每个 input 独立配置
避免硬编码阈值，让 HTML 控制行为更灵活。比如一个头像上传限 2MB，一个商品图限 10MB，不用改 JS 就能切换。
- 在 input 上写：
<input type="file" data-max-size="2097152" /> - JS 中用
input.getAttribute('data-max-size')读取，转成数字后与file.size比较 - 注意：属性值是字符串，必须显式转
Number()或parseInt()，否则'2097152' > 1000000会按字符串比较出错
后端必须设两道硬限制：框架层 + 服务器层
前端校验形同虚设，curl、Postman、禁用 JS 都能跳过。后端限制一旦漏掉一层，就可能被大文件打挂服务或触发 413 错误。
立即学习“前端免费学习笔记（深入）”；
- Node.js + multer：必须配
limits: { fileSize: 10 * 1024 * 1024 }，只设req.file.size校验没用 - PHP：要同步调大
upload_max_filesize和post_max_size，后者必须 ≥ 前者，否则请求根本进不到 PHP - Nginx：
client_max_body_size必须 ≥ 后端允许的最大值，否则请求连 Nginx 这关都过不去，直接 413，前端连错误响应都收不到
最容易被忽略的是 Nginx 和后端框架限制不一致——比如 Nginx 设了 20M，但 multer 只允许 5M，用户上传 10MB 文件时，后端根本收不到数据，前端卡住几秒后静默失败。这种问题不会报错，只会让你反复怀疑 JS 写错了。
