拖拽上传文件大小限制需三层校验：前端JS在drop事件中遍历e.dataTransfer.files检查file.size，配合data-max-size属性动态读取阈值；后端须配置Nginx client_max_body_size、框架文件大小限制（如Express multer limits）及语言级上传参数；三者缺一不可。
拖拽上传时无法靠 HTML 属性限制文件大小，accept、maxlength 等对 <input type="file"> 有效，但对 drop 事件完全无效。真正能起作用的只有：监听 drop 事件后手动检查 file.size，并配合后端强制拦截。
drop 事件里怎么校验单个/多个文件大小
拖拽进来的文件在 e.dataTransfer.files 中，是个 FileList，不是数组，但可用 for...of 遍历。每个 File 对象有 size（字节），必须在 drop 回调里立刻检查——别等提交再判，用户松手就该反馈。
- 单文件场景：只取
files[0]，判断file.size > 5 * 1024 * 1024（5MB） - 多文件场景：必须遍历全部，任一超限就中断上传，不能只校第一个
- 移动端 iOS Safari 在
drop后可能短暂读不到size，加setTimeout(..., 50)再读更稳 - 别用
files.length === 0判空——拖拽空目录或权限不足时，files可能非空但size为 0
为什么不能只信前端校验？后端必须做什么
前端 JS 可被禁用、绕过或篡改，drop 事件里的校验只是用户体验层，后端才是防线。常见漏配点：
- Nginx 默认
client_max_body_size是 1MB，拖一个 10MB 文件直接 413，根本到不了你的 Node.js/PHP 代码 - Express + multer 必须显式设
limits: { fileSize: 10 * 1024 * 1024 }，光写fileFilter不拦大小 - Flask 的
MAX_CONTENT_LENGTH默认 512KB，不改就只能收小图；且它只校总请求体，含多个文件时得自己算总和 - PHP 的
upload_max_filesize和post_max_size要同时调大，后者必须 ≥ 前者 + 表单其他字段开销
如何让限制值可配置又不硬编码
把阈值从 JS 里抽出来，绑定到 DOM 上，方便不同区域用不同规则，也利于服务端渲染时同步值。
立即学习“前端免费学习笔记（深入）”；
- 给拖拽容器加自定义属性：
<div class="drop-area" data-max-size="20971520">（20MB）<li>在 <code>drop事件里用dropZone.getAttribute('data-max-size')读取，转成数字再比file.size - 若需支持单位简写（如
"10MB"），自己写个解析函数，避免正则或eval - 注意：不要用
dataset.maxSize直接读——它会自动转成小写且丢掉单位，data-max-size更可控
最易忽略的是 Nginx 层的 client_max_body_size，它像一道墙，挡在所有业务逻辑之前；很多团队调通了前端、改好了后端，却卡在这一步，报错还只是空白 413 页面。拖拽上传的“大小限制”本质是三层过滤：DOM 层视觉提示 → JS 层即时拦截 → 服务器网关层硬性截断。少一层，都可能让大文件悄悄打穿你的磁盘或内存。
