HTML上传文件夹怎么限制大小？前端校验流程-html教程-PHP中文网

HTML input 无法原生限制文件夹大小，需前端遍历 files 累加 size 并校验，但可被绕过；后端必须流式统计 multipart 总体积并配置服务器层 body 限制，同时兼顾移动端降级与浏览器兼容性检测。

html上传文件夹怎么限制大小？前端校验流程

HTML `input` 本身不支持文件夹大小限制

浏览器原生的（已废弃）或（非标准）只能获取文件列表，无法直接读取整个文件夹的总大小。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

示例代码片段：

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。后端必须做两件事：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

在接收 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') 再决定是否展示该入口。