HTML如何实现无刷新上传文件夹？异步实现方案-html教程-PHP中文网

HTML原生不支持直接上传整个文件夹；webkitdirectory仅在Chrome/Edge/Safari中返回扁平化文件列表，依赖webkitRelativePath还原路径但不可靠，Firefox不支持，真需文件夹上传应采用drag & drop + File API递归遍历方案。

html如何实现无刷新上传文件夹？异步实现方案

HTML 原生不支持通过直接上传**整个文件夹**（含子目录结构），所谓“上传文件夹”实际是浏览器对 webkitdirectory 属性的支持——它只提供**扁平化文件列表**，不保留路径层级，且兼容性有限。真要实现类似网盘的文件夹拖拽上传，必须组合使用 webkitdirectory、directory（实验性）、或更可靠的 drag & drop + FileList 遍历方案。

为什么不能真正传文件夹结构

该属性仅在 Chrome/Edge/Safari 中有效，Firefox 完全不支持；它返回的 FileList 中每个 File 对象的 webkitRelativePath 字段理论上含路径，但：
• 服务端无法直接还原目录树，需前端手动解析并补全路径前缀
• 多数后端框架（如 Express multer、Spring MultipartFile）默认只接收扁平文件流，不处理嵌套路径
• webkitRelativePath 在部分版本 Safari 中为空，不可靠
• 若用户手动勾选多个文件而非用文件夹选择，路径信息完全丢失

所以，别依赖 webkitdirectory 做生产级文件夹上传。

用 `drag & drop` + `File` API 遍历获取完整路径信息

这是目前最可控、兼容性更好的方式：监听 drop 事件，遍历 event.dataTransfer.items，对每个 FileSystemEntry 递归读取（注意：仅 Chromium 系支持 webkitGetAsEntry；Firefox 用 getAsFile() 只得文件，无路径）。

实操要点：

必须在 drop 事件中调用 event.preventDefault()，否则浏览器会尝试打开/导航
item.webkitGetAsEntry() 返回 FileSystemDirectoryEntry 或 FileSystemFileEntry，需递归 createReader().readEntries()
每个 File 对象可通过 file.webkitRelativePath 获取相对路径（若有），否则需前端按拖入顺序或文件名模拟层级
最终仍要用 FormData 逐个 append('files', file, fullPath)，其中 fullPath 是你拼出的带斜杠路径字符串（如 "project/src/main.js"）
后端必须能解析这个自定义路径字段，不能只依赖原始文件名

后端如何接收并还原文件夹结构？

关键不在前端怎么发，而在后端怎么收和存：

• Node.js（Express + multer）：multer 默认不解析 fullPath，需用 multer.memoryStorage() 拿到 Buffer 后，从 req.files[i].originalname 或自定义字段（如 req.body.paths[i]）提取路径，再用 fs.mkdirSync(path.dirname(fullPath), { recursive: true }) 创建目录，最后 fs.writeFileSync(fullPath, buffer)