HTML原生不支持可靠文件夹上传，因webkitdirectory属性仅Blink内核支持、无路径层级信息、返回扁平FileList且被Safari/Firefox忽略；完整方案需后端参与，如ZIP上传解压或showDirectoryPicker()逐文件处理。
HTML 本身无法直接上传整个文件夹——这是浏览器安全策略决定的，input[type="file"] 默认不支持 webkitdirectory 以外的原生文件夹上传，且该属性仅限 Chrome/Edge 等 Blink 内核浏览器，Firefox 和 Safari 均不支持。
为什么 input[type="file"] 加 webkitdirectory 不可靠
这个属性看似能“上传文件夹”，但实际只是让浏览器递归列出选中文件夹内所有文件（不含空子目录），且返回的是扁平化的 FileList，没有层级路径信息。更关键的是：
- 它不触发真正的 HTTP 文件上传，只是前端可读取的本地
File对象集合 -
File.webkitRelativePath字段在部分 Chrome 版本中被弃用或返回空字符串 - Safari 完全忽略该属性；Firefox 从未实现；即使在 Edge 中，深层嵌套（>8 层）也可能截断路径
- 你无法通过它获取文件夹元数据（如是否为目录、修改时间、权限等）
真正可行的替代路径：后端必须参与
要完整保留文件夹结构并生成准确的树状视图，必须走服务端方案。常见组合有：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 前端用
<input type="file" multiple webkitdirectory>尝试采集（仅作 fallback 或简单场景） - 更稳的做法是：用户 zip 压缩整个文件夹 → 前端用
FileReader读取 blob → 通过fetch上传到后端 → 后端解压、解析目录结构、生成 JSON 树 → 返回给前端渲染 - 或使用 WebKit-only 的
showDirectoryPicker()API（需 HTTPS + 用户手动授权），但它返回的是FileSystemDirectoryHandle，只能在同源页面内读取，不能直接上传，仍需逐个getFileHandle()+createReadableStream()拆包上传
上传后怎么渲染成稳定文件树
拿到后端返回的嵌套 JSON（如 {name: "src", type: "dir", children: [...]}）后，渲染时优先选原生 <ul><li></ul> 嵌套，而非 div + padding 模拟：
立即学习“前端免费学习笔记（深入）”；
- 避免用
padding-left控制缩进——IE11 和 PDF 导出时计算异常 - 每层
<li>必须包裹一个<ul></ul>子列表，不能漏层或跨级 - 连线用
::before绝对定位画竖线 +::after在最后一个子项画横线，禁用transform - 图标统一用伪元素
::before { content: "?"; }，别塞<img alt="HTML怎么上传文件夹并展示文件树状结构" >或 Unicode（字体切换易偏移）
最麻烦的不是把 JSON 变成 DOM，而是让缩进像素、连线位置、图标对齐在 Chrome/Firefox/Safari/PDF 打印下全部一致——这些细节一旦写错，改起来比重写还费劲。
