drop事件不触发的根本原因是未在dragover中调用event.preventdefault()；必须为拖放目标绑定dragover并阻止默认行为，否则浏览器拒绝投放且不报错。
drop 事件不触发？检查是否阻止了默认行为
浏览器对拖拽上传有严格限制：即使绑定了 drop 事件，只要没在 dragover 阶段调用 event.preventDefault()，文件就无法真正“落”进来——浏览器会按默认行为打开文件，而不是交给你的 JS 处理。
常见错误是只监听 drop，却忘了给 dragover 加拦截：
const dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须！否则 drop 不触发
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault(); // 同样必须
const files = e.dataTransfer.files; // 这里才能拿到 FileList
handleFiles(files);
});
-
dragenter和dragleave可选，用于视觉反馈（比如高亮边框），但不是功能必需 - 不要在
dragover里做耗时操作，它会高频触发，影响拖拽流畅度 - 移动端不支持原生
dataTransfer.files，iOS Safari 直至 iOS 16.4 才有限支持，需降级为点击上传
如何安全读取拖入的文件？别直接访问 files[0].path
File 对象是浏览器沙箱内的引用，file.path 在所有现代浏览器中都返回空字符串或报错——这是故意设计的安全限制，防止前端窥探用户真实文件系统路径。
你真正能用的只有这些属性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
for (let file of e.dataTransfer.files) {
console.log(file.name); // ✅ 文件名（含扩展名）
console.log(file.size); // ✅ 字节数
console.log(file.type); // ✅ MIME 类型（如 'image/png'，可能为空）
console.log(file.lastModified); // ✅ 时间戳
}
- 校验类型别只信
file.type，它可被伪造；后端必须重新检测二进制内容 - 大文件（如 >100MB）建议先用
FileReader.readAsArrayBuffer()分块读取，避免阻塞主线程 - 若需预览图片，用
URL.createObjectURL(file)创建临时 URL，用完记得URL.revokeObjectURL()
dropzone 样式怎么写才像“可拖拽”？关键在 cursor 和 outline
用户需要明确感知“这里可以拖文件进来”。纯靠文字提示效果差，必须配合视觉反馈：
- 拖入前：
cursor: pointer+ 轻微边框（如border: 2px dashed #999） - 拖入中（
dragover触发时）：border-color: #007bff+background-color: #f8f9fa+outline: 2px solid #007bff - 禁用状态（如上传中）：
opacity: 0.6+pointer-events: none
注意：不要依赖 :hover 模拟拖入态，因为拖拽过程不会触发 hover；必须用 JS 切换 class：
dropZone.addEventListener('dragover', () => {
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
为什么上传失败却没报错？检查 dataTransfer.items 和 file validation
有时 e.dataTransfer.files.length === 0，但其实有东西——比如用户拖的是文件夹、截图、甚至网页链接。这时候得查 e.dataTransfer.items：
const items = e.dataTransfer.items;
for (let item of items) {
if (item.kind === 'file') {
const file = item.getAsFile();
if (file) handleFile(file);
}
// item.kind === 'string' 可能是拖入的文本或 URL
}
- 文件夹在 Chrome/Firefox 中会以
Directory形式存在，需用item.webkitGetAsEntry()递归读取（兼容性差，慎用） - 用户可能拖入 .app（macOS）、.exe（Windows）等系统文件，
file.type为空，需靠扩展名白名单过滤 - 上传前务必限制最大数量和单个大小，否则大文件拖入后卡顿，用户以为页面崩溃了
最常被忽略的一点：没有 fallback 点击上传入口。拖拽是锦上添花，不是唯一路径——总有人不知道能拖，或者用不支持的设备。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
