HTML5无法实现拖拽文件到本地文件夹，因浏览器无系统级文件操作权限；drop事件仅获FileList或DataTransferItem，不含真实路径，且受安全限制禁止访问本地路径。
HTML5拖拽文件到文件夹根本做不到
浏览器没有系统级文件操作权限，drop 事件拿到的只是 FileList 或 DataTransferItem，不是真实路径，更不能写入任意文件夹。所谓“拖进文件夹”，其实是用户在操作系统里拖，和网页完全无关。
为什么drop事件拿不到目标文件夹路径
出于安全限制，浏览器禁止 JavaScript 访问本地文件系统路径。即使用户把文件拖进页面，event.dataTransfer.files 返回的每个 File 对象都只有 name、size、type，webkitRelativePath 仅在 <input type="file" webkitdirectory> 下可能有值，且不表示真实磁盘路径。
- 常见错误现象：
console.log(file.path)输出undefined，或尝试用file.fullPath报错 - 使用场景：想自动把上传文件存到用户指定的本地目录（如“下载/素材”）——这在标准 Web API 中不可行
- 参数差异：
event.dataTransfer.items可能包含kind: "file"或"string"，但无一提供目标位置信息
能做的边界：仅限读取 + 有限写入
真正可行的操作，是让用户主动选择目标位置，或由浏览器代为处理写入。
- 读取拖入内容：用
event.dataTransfer.files或event.dataTransfer.items获取File对象，再用FileReader或URL.createObjectURL()处理 - 写入本地：只能通过
<a download></a>触发下载（浏览器决定保存位置），或调用showSaveFilePicker()（需 HTTPS + Chrome/Edge 86+，返回FileSystemFileHandle） - 性能影响：大量文件拖入时，
FileList是只读快照，不会实时同步磁盘变化；反复调用getAsFile()不会触发额外 I/O - 兼容性注意：
showSaveFilePicker()在 Safari 和 Firefox 完全不支持，webkitdirectory仅 Chrome/Edge 支持
别被“HTML5拖拽上传”误导
很多教程标题写“拖拽上传”，实际只是把文件拖进网页区域后调用 fetch() 发到服务器。它和“拖进本地文件夹”是两件事，混淆这两者是绝大多数误判的源头。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：监听
dragover时没调用event.preventDefault()，导致浏览器执行默认行为（打开文件或导航） - 另一个坑：以为
event.dataTransfer.dropEffect = "move"能触发系统级移动——它只影响光标样式，对实际行为零影响 - 真实约束：哪怕启用
chrome://flags/#unsafely-treat-insecure-origin-as-secure，也无法绕过沙箱限制
核心就一点：网页永远不知道用户想把东西扔到哪个磁盘路径，也永远不能替用户执行那个动作。所有“模拟”方案，本质都是引导用户点选、确认、下载，而不是接管系统行为。
