无需登录 数据私有 本地保存

目录上传与文件树展示 - 保留结构上传

开发工具 文件 文件树 目录上传
10
0
0
0
点击选择文件夹 或 拖拽文件夹到此处
支持保留完整目录结构 · 纯前端处理，文件不会上传到服务器

上传文件夹后，文件树将在此展示

支持点击展开/折叠目录
常见问题

目录上传允许您一次性选择整个文件夹进行上传，浏览器会自动保留完整的文件夹结构（包括子目录层级）。与普通文件上传只能选择单个或多个文件不同，目录上传能完整还原文件在本地磁盘中的组织方式。本工具使用浏览器的 webkitdirectory 属性实现，纯前端处理，文件不会上传到任何服务器，仅在本地展示结构。

Chrome、Edge、Firefox、Opera 等主流桌面浏览器均完整支持。Safari 在 macOS 上也支持，但 iOS Safari 的支持较为有限。移动端建议使用点击按钮选择文件夹的方式。拖拽上传文件夹在 Chrome/Edge 中体验最佳。

完全不会。本工具所有操作均在您的浏览器本地完成。文件内容、路径、大小等信息仅用于在页面上构建和展示目录树结构，绝不会通过网络传输到任何远程服务器。您可以放心使用，即使处理敏感项目文件也无需担心隐私泄露。

通过点击上传（webkitdirectory 方式）时，由于浏览器只返回文件列表，空文件夹无法被检测到，因此不会出现在树结构中。但通过拖拽上传（使用 Entry API）时，空文件夹可以被识别并显示，标注为"空目录"。建议使用拖拽方式以获得最完整的目录结构。

工具提供了两种导出方式：
① 复制结构：生成类似 tree 命令的文本格式，使用 ├── 和 └── 符号展示层级，可直接粘贴到文档或 README 中。
② 导出JSON：将完整目录结构导出为 JSON 格式，方便程序化处理或存档。两种方式均通过剪贴板复制，一键操作。

搜索框支持实时模糊匹配，输入关键词后会自动过滤文件树，只显示名称包含关键词的文件和文件夹。匹配的节点会自动展开其父级路径，确保您能看到文件的完整位置。匹配项会高亮显示。清空搜索框即可恢复完整视图。支持中英文及特殊字符搜索。

理论上没有硬性限制，但受浏览器内存和性能影响。实测在 Chrome 中可以流畅处理包含 5000+ 文件的文件夹。对于超大项目（如 node_modules），建议排除该目录后再上传，以获得更好的浏览体验。文件内容仅在构建树结构时读取元数据（名称、大小），不会全部加载到内存中。

请确保您拖拽的是文件夹而非单个文件（虽然拖拽文件也支持，但会放在根级别）。另外，某些浏览器（如 Firefox）对拖拽文件夹的 Entry API 支持有限，此时建议使用点击上传按钮的方式。在 Windows 资源管理器或 macOS Finder 中直接拖拽文件夹到上传区域即可。
🔧 相关工具