移动端文件上传需前端实时校验（监听file change、检查size）+后端严格兜底（Content-Length校验、Nginx/Apache限流、413响应），并结合移动端优化：显示预估大小、图片压缩、自动重试及弱网提醒。
移动端网页限制文件上传体积，核心是前端校验 + 后端兜底，单靠前端无法真正防止超限，但能第一时间拦截、提升用户体验并减少无效请求。
前端 JS 实时校验文件大小
在用户选择文件后、提交前立即检查，避免上传失败再提示：
- 监听
<input type="file">的change事件 - 读取
event.target.files[0].size（单位为字节） - 与预设阈值（如 25MB = 26214400 字节）比较，超限则禁用提交按钮并提示
- 示例：若限制 25KB（即 25600 字节），可写
if (file.size > 25600) { alert('文件不能超过 25KB'); }
HTML 属性辅助限制（基础层）
虽不能强制阻止，但可配合浏览器默认行为：
- 使用
accept属性缩小可选文件类型范围（如accept="image/*"） -
max属性对<input type="file">无效，不要依赖 - 可在表单提交时用
onsubmit触发 JS 校验，增强一致性
后端必须做二次校验和容错
前端可被绕过，所有上传接口都需服务端严格把关：
- 在接收请求的入口处检查
Content-Length头或实际 body 大小 - 配置 Web 服务器（如 Nginx 的
client_max_body_size、Apache 的LimitRequestBody）提前拦截超大请求 - 返回明确的 HTTP 状态码（如 413 Payload Too Large）和友好提示，便于前端统一处理
- 记录超限日志，用于监控异常上传行为
结合移动端特点优化体验
小屏设备操作受限，需更谨慎设计交互：
- 上传前显示文件名和预估大小，让用户有预期
- 支持图片压缩（如用 Canvas 缩放或
canvas.toBlob降质）再上传，尤其适合头像、证件照等场景 - 对超限文件提供“自动压缩后重试”选项，而非仅报错退出
- 避免在弱网下尝试上传大文件，可结合
navigator.onLine或网络类型判断做提醒
