webkitdirectory 属性不生效的常见原因包括：未同时使用 multiple 属性、误用已废弃的 directory 属性、添加了不支持的 accept 属性、通过 js 调用 click() 触发而非用户真实点击，以及浏览器兼容性限制（如 safari 16.4+ 才支持、firefox 不支持路径信息）。
webkitdirectory 属性不生效，常见原因有哪些
它不是标准属性，不生效是常态，而不是异常。最常踩的坑是漏掉 multiple 或用了无效写法。
-
webkitdirectory必须和multiple同时存在，缺一不可；只加webkitdirectory会导致e.target.files.length === 0或返回一个空字符串（不是 File 对象） -
directory是历史遗留写法，Firefox 早已废弃，但加上无害；单独用directory在任何现代浏览器里都不起作用 - 写了
accept会干扰弹窗逻辑——文件夹选择器不支持类型过滤，加了反而可能让对话框根本不出 - 用 JS 调用
input.click()在多数浏览器中被静默拦截，必须由用户真实点击触发
如何判断当前环境是否支持 webkitdirectory
不能靠 UA 字符串猜，要实测 API 存在性。Safari 16.4+ 才开始支持，旧版 Safari 和 IE 完全没这个字段。
- 检查
HTMLInputElement.prototype.webkitdirectory是否为undefined（注意：不是看元素实例，而是原型） - 更稳妥的做法是直接尝试渲染并监听
change事件，再检查e.target.files[0]?.webkitRelativePath是否有值 - Firefox 虽然识别
webkitdirectory属性，但file.webkitRelativePath始终为空字符串，需 fallback 到file.name
选中后拿到的 files 里路径全为空，怎么定位问题
file.webkitRelativePath 是唯一能还原目录结构的字段，但它在部分场景下会丢失——不是你代码写错了，而是浏览器策略或用户操作导致。
- 用户没点进子目录、只是选中空文件夹根目录，
webkitRelativePath可能为""或undefined，此时应 fallback 到file.name - Safari 某些安全策略（如 iframe sandbox、document.domain 修改）会清空该字段，建议在非沙箱环境测试
- 不要试图读取
file.path—— 这个字段早在 Chromium 72+ 就被移除，访问它不会报错但永远是undefined - 上传时若用
FormData.append('files', file, file.webkitRelativePath)，当webkitRelativePath为空时，第三个参数会变成undefined，后端收到的就是原始文件名，不是错误，是预期行为
后端收不到路径信息，前端可能漏了什么
前端拿到 webkitRelativePath 后，必须显式传出去，它不会自动附带在文件字段里。
- 别只做
formData.append('file', file)，这会丢掉路径；必须用三参数形式：formData.append('files', file, file.webkitRelativePath || file.name) - 如果用 fetch +
body: formData，确保没手动设置Content-Type头——浏览器会自动设为multipart/form-data; boundary=...，手设会破坏边界解析 - 服务端接收时，不能只依赖
filename字段（它通常只含 basename），得从 FormData 的 field name 或额外字段中提取路径信息
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
