HTML中file上传选择文件夹webkitdirectory怎么写-html教程-PHP中文网

正确写法是，其中 directory 是标准属性，webkitdirectory 是 webkit/blink 私有扩展，需配合使用以确保兼容性。

html中file上传选择文件夹webkitdirectory怎么写

file input 添加 `webkitdirectory` 属性的正确写法

直接加 webkitdirectory 属性就行，但它只在 Chrome、Edge（基于 Chromium）、新版 Safari（16.4+）中生效，Firefox 完全不支持。它不是标准属性，而是 WebKit/Blink 的私有扩展，所以必须搭配 directory 标准属性一起用才稳妥。

<input type="file" webkitdirectory directory multiple> 是目前最兼容的写法
单独写 webkitdirectory 不会报错，但某些版本 Chrome 会忽略它（尤其没加 multiple 时）
directory 是 HTML5 标准属性，现代浏览器会优先识别它；webkitdirectory 是为了兜底旧版 Chrome（
必须带 multiple，否则即使选中文件夹，也只返回根目录下的文件（不递归），且部分浏览器会禁用选择文件夹功能

选中文件夹后拿到的是什么？`event.target.files` 结构说明

用户选择一个文件夹后，event.target.files 返回的是一个 FileList，里面每个项是 File 对象，但它们的 webkitRelativePath 属性才体现真实路径层级 —— 这是关键，原生 name 只是文件名，没有目录信息。

file.name 永远只是文件名（如 "data.json"），不含任何路径
file.webkitRelativePath 是相对路径字符串（如 "project/src/main.js"），这才是你重建目录结构的唯一依据
这个路径是用户选择的文件夹为根，不是系统绝对路径，也不含盘符或主机信息，安全可用
注意：Safari 16.4+ 支持 webkitRelativePath，但旧版 Safari 和 Firefox 返回空字符串

为什么上传时后端收不到目录结构？常见原因和绕过方式

HTTP 表单上传本身不传输路径信息，File 对象里的 webkitRelativePath 不会自动作为字段发出去。你得手动把它带上，否则后端只能看到一堆同名文件（比如多个 index.html 冲突）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

不能依赖 FormData.append('file', file) 单独传 —— 这只会传文件内容，丢掉路径
正确做法：对每个 file，用 FormData.append('files', file, file.webkitRelativePath || file.name)，第三个参数是自定义文件名，会作为 Content-Disposition 的 filename 字段发送
后端需解析 multipart 中的 filename 字段（不是 body 解析出来的名字），才能还原原始路径
如果后端框架（如 Express + multer）默认只取 originalname，要确认它是否读取了 filename 参数；否则得自己解析 raw multipart 流

替代方案：用 `showDirectoryPicker()` API 更可靠吗？

Chrome 86+、Edge 86+、Safari 16.4+ 支持新的 File System Access API，showDirectoryPicker() 能真正获取目录句柄并递归读取，比 webkitdirectory 稳定得多，但需要 HTTPS 或 localhost，且用户必须主动点击授权。

调用后返回 FileSystemDirectoryHandle，可遍历子项：for await (const entry of dirHandle.values()) { ... }
每个 entry 是 FileSystemFileHandle 或 FileSystemDirectoryHandle，能精确控制读取顺序和层级
缺点：IE/Edge Legacy、Firefox 全面不支持；移动端基本不可用；权限弹窗无法静默触发
如果你只面向桌面 Chrome/Edge 用户且需要完整目录操作（比如打包上传、预览结构），优先用这个；否则 webkitdirectory + webkitRelativePath 仍是最低门槛方案