HTML input 无法原生限制文件夹大小，需前端遍历 files 累加 size 并校验，但可被绕过；后端必须流式统计 multipart 总体积并配置服务器层 body 限制，同时兼顾移动端降级与浏览器兼容性检测。
HTML input 本身不支持文件夹大小限制
浏览器原生的 <input type="directory">（已废弃）或 <input webkitdirectory>（非标准）只能获取文件列表，无法直接读取整个文件夹的总大小。files 对象里每个 File 都有 size，但没有 folder.size —— 这个值前端根本拿不到。
所谓“限制文件夹大小”，实际是：遍历所有选中的文件，累加 file.size，再与阈值比较。必须手动实现，且要注意边界情况：
- 用户可能拖放嵌套很深的子目录，
webkitRelativePath可用于还原结构，但不提供体积信息 - 某些浏览器（如 Safari）对大量文件的
files列表存在性能延迟，需节流或分批处理 - 大文件夹可能含数百个文件，遍历时别用
for...in或递归爆栈，改用for (let i = 0; i
监听 change 后立即遍历累加校验
不能只校验第一个文件，也不能依赖 accept —— 它对文件夹无效。正确流程是：
- 监听
input[type="file"][webkitdirectory]的change事件 - 拿到
e.target.files（FileList类型），逐个读取file.size - 用
reduce累加总字节数：Array.from(files).reduce((sum, f) => sum + f.size, 0) - 超限时清空
e.target.value并提示，否则同文件夹重复选择不触发change
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
document.getElementById('folderInput').addEventListener('change', function(e) {
const files = e.target.files;
if (!files.length) return;
const totalSize = Array.from(files).reduce((sum, f) => sum + f.size, 0);
const maxSize = 500 * 1024 * 1024; // 500MB
if (totalSize > maxSize) {
alert(`文件夹总大小不能超过 500MB，当前约 ${(totalSize / 1024 / 1024).toFixed(1)}MB`);
e.target.value = ''; // 必须清空
}
});后端才是真正能拦住大文件夹的地方
前端累加只是体验优化，完全可被绕过：用户删掉 JS、用 curl 直传、或伪造 FormData。后端必须做两件事：
- 在接收 multipart 请求时，**流式读取并实时累计 body 字节数**，一超限就中断连接（不能等整个请求体收完再判断）
- 配置 Web 服务器层限制：
Nginx的client_max_body_size、Apache的LimitRequestBody，否则请求根本到不了你的应用层 - 若用 Node.js +
multer，limits.fileSize是单文件限制，对文件夹无效；需配合limits.fieldSize或自定义中间件统计 multipart 总长度
特别注意：Nginx 默认 client_max_body_size 是 1MB，上传几百 MB 文件夹前务必调大，否则直接返回 413，连后端日志都看不到。
移动端和弱网下要主动降级
移动端选中一个 2GB 的文件夹，前端遍历+累加可能卡顿甚至崩溃，用户也看不出发生了什么。更务实的做法是：
- 用
navigator.deviceMemory和navigator.connection.effectiveType判断设备能力，低配机或 2G/3G 网络下直接把阈值压到 50MB - 对图片类文件夹，不等用户点上传，就在预览阶段用
URL.createObjectURL()+ Canvas 压缩估算输出体积 - 禁用
webkitdirectory（iOS Safari 不支持），改用多次单文件上传 + UI 引导“请逐个上传”
真正容易被忽略的点是：文件夹上传没有统一标准，Chrome 支持 webkitdirectory，Firefox 用 mozdirectory（已移除），Safari 彻底不支持。如果你的应用必须支持文件夹上传，不要默认它“可用”，先检测 'webkitdirectory' in document.createElement('input') 再决定是否展示该入口。
