webkitdirectory不是标准属性，因为它是Chrome/Edge早期引入的WebKit私有前缀属性，虽被部分浏览器沿用，但未纳入W3C标准；Firefox支持标准directory属性但不递归子目录，Safari和旧IE则完全不支持，导致跨浏览器行为不一致。
为什么 webkitdirectory 不是标准属性？
因为 webkitdirectory 是 Chrome/Edge（基于 Chromium）早期为支持文件夹上传引入的私有前缀属性，Firefox 后来实现了标准版 directory，但 Safari 和旧版 IE 完全不支持。这意味着仅靠这个属性无法做到跨浏览器兼容——你在 Chrome 里选中一个文件夹，event.target.files 会返回该文件夹下所有文件（含子目录内文件），但在 Safari 点击后只会弹出空选择框或报错。
directory 和 webkitdirectory 怎么共存使用？
可以同时写上两个属性，浏览器会自动忽略不支持的那个：
<input type="file" name="folder" directory webkitdirectory>
但要注意以下几点：
-
directory属性必须搭配type="file"，不能和multiple混用（否则部分浏览器行为异常） - 即使加了
directory，Chrome 仍要求用户手动勾选“包含子文件夹”复选框（UI 行为不可编程控制） - Firefox 63+ 支持
directory，但只返回顶层文件，**不会递归列出子目录里的文件**——这是和 Chrome 最大差异 - 选中的“文件夹”在
event.target.files中仍是FileList，没有额外的webkitRelativePath以外的路径信息；Chrome 提供file.webkitRelativePath（如"my-folder/sub/a.txt"），Firefox 不提供等价字段
如何判断用户是否真传了文件夹而不是单个文件？
不能只看 files.length，因为用户可能只选中文件夹里一个文件。更可靠的方式是检查是否有任意文件的 webkitRelativePath 包含 "/"：
const files = event.target.files;<br>const hasFolderStructure = Array.from(files).some(f => f.webkitRelativePath && f.webkitRelativePath.includes('/'));
如果返回 true，基本可确认用户通过文件夹选择模式上传；否则大概率是单文件或多个独立文件。
后端怎么处理文件夹上传的路径信息？
前端传过来的每个 File 对象只有原始文件名（file.name）和可选的 webkitRelativePath，后者不是标准字段，不能依赖。所以后端必须：
- 明确约定：只信任
webkitRelativePath（Chrome）或完全忽略它（Firefox/Safari），统一用服务端生成唯一路径 - 若需保留目录结构，前端需在上传前用
FormData.append()手动补一个隐藏字段，例如：formData.append('baseDir', 'project-src') - Node.js +
multer或 Python +Flask默认不解析webkitRelativePath，需要自己从req.headers或额外字段提取并拼接存储路径 - 注意：文件名可能含
../，必须做路径净化（如用path.resolve()+path.join()校验），否则有目录遍历风险
文件夹上传真正难的不是选中动作，而是路径语义的丢失与重建——浏览器没给你标准接口，就得自己定义规则、前后端对齐、并守住安全底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
