不能，webkitdirectory 非标准属性，仅 chrome/edge 稳定支持，firefox 不支持，safari 16.4+ 才支持，ie 全不支持；正确写法是 ，缺一不可。
webkitdirectory 能不能直接用
不能当作跨浏览器方案直接用。它不是 HTML 标准，W3C 未定义，Firefox 已明确不支持 webkitdirectory，Safari 仅从 16.4+ 开始支持，旧版 Safari 和所有 IE 都无效。Chrome/Edge 是目前最稳定的支持者。
怎么写 HTML 才能弹出「选择文件夹」对话框
必须同时满足三个条件，缺一不可：
-
<input type="file">必须带webkitdirectory属性（实际起效） - 必须加
directory属性（兼容性冗余，对 Chrome 无影响，Firefox 旧版曾依赖它） - 必须加
multiple属性——不加的话，Chrome 可能只返回一个空FileList或根本不出对话框；Safari 16.4+ 会静默失败
正确写法是：<input type="file" webkitdirectory directory multiple>。不要加 accept，它对文件夹选择无过滤作用；也不要设 value，该属性只读，JS 赋值无效。
选中后怎么拿到每个文件的路径信息
event.target.files 是一个扁平化的 FileList，里面没有目录嵌套结构，所有文件都是平级的。唯一能还原原始路径的是每个 File 对象上的 webkitRelativePath 字段，比如 "src/main.js" 或 "assets/images/logo.png"。
注意：file.name 永远只是纯文件名（如 "main.js"），不含任何路径；file.path 在现代 Chromium 中已被移除，读取会返回 undefined。
常见错误：
- 在 Firefox 中访问
file.webkitRelativePath→ 总是空字符串，因为不支持 - 没做空值判断就直接
.split('/')→ 报错 - 把
webkitRelativePath当作本地绝对路径使用 → 安全限制下无法访问磁盘真实路径
上传时如何保留文件夹结构
前端不能自动创建服务端目录，必须把路径信息显式传过去。推荐做法是在构建 FormData 时，用 webkitRelativePath 作为第三个参数：
const formData = new FormData();
for (const file of files) {
if (file.webkitRelativePath) {
formData.append('files', file, file.webkitRelativePath);
} else {
formData.append('files', file, file.name); // fallback
}
}
后端收到后，需按这个路径字段逐级创建子目录再保存文件。如果只用 file.name，所有文件都会挤在根目录，结构彻底丢失。
容易被忽略的一点：即使用户选了 /project/src，webkitRelativePath 的值也是 "index.html" 或 "utils/helper.js"，不带前缀斜杠，也不含最外层文件夹名——它始终是相对于所选文件夹的相对路径，这点必须在前后端约定清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
