拖拽上传需同时监听dragover和drop事件并阻止默认行为，通过dataTransfer.files获取文件，用FormData上传，配合CSS状态类反馈，移动端需降级为点击触发。
拖拽上传区域的 HTML 结构必须包含 dropzone 属性和对应事件监听
浏览器原生拖拽上传依赖 dragover 和 drop 两个关键事件，缺一不可。仅写 ondragover 不阻止默认行为，会导致浏览器打开文件（尤其是图片/文本），而不是触发上传。
核心结构需满足三点：
-
<div id="dropzone" draggable="false">——draggable="false"防止误拖动容器本身 - 必须在
dragover事件中调用event.preventDefault()和event.stopPropagation() -
drop事件里通过event.dataTransfer.files获取文件列表，不能用input[type="file"]的files属性替代
常见错误：把 ondrop 直接写在 HTML 标签里（如 <div ondrop="handleDrop()">），但没同时绑定 ondragover，结果拖进去就跳转到新页面。
FileReader 读取文件前务必校验 files.length 和 type
用户可能拖入空文件夹、快捷方式或不支持的格式（比如 .exe 或 .zip），dataTransfer.files 会包含这些“假文件”，直接读取会报错或上传失败。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 先检查
event.dataTransfer.files.length === 0，避免后续逻辑崩溃 - 对每个
file做file.type.startsWith('image/') || file.type === 'text/plain'类型白名单判断 - 用
file.size < 5 * 1024 * 1024控制单文件上限（5MB），防止大文件卡死FileReader - 不要依赖
file.name后缀名判断类型——它可被轻易伪造，file.type才是 MIME 真实来源
上传前用 FormData 构造请求体，别拼 URL 参数
拖拽上传本质是 POST 文件二进制流，不是传字符串。若把文件内容转成 base64 再塞进 JSON，既浪费内存又增加服务端解析负担。
正确做法是用 FormData：
const formData = new FormData();
formData.append('upload', file); // 'upload' 是后端约定的字段名
fetch('/api/upload', {
method: 'POST',
body: formData // 注意：不要设 Content-Type，让浏览器自动设 multipart/form-data
});容易踩的坑：
- 手动设置
headers: {'Content-Type': 'multipart/form-data'}—— 这会让浏览器无法自动附带 boundary，导致后端收不到文件 - 重复
append同名字段却没加索引，后端只拿到最后一个 - 拖多个文件时，用
for (let i = 0; i < files.length; i++) { formData.append('uploads', files[i]) }，后端收到的是数组而非单个文件
拖拽反馈样式必须靠 CSS :hover + JS 切换 class 实现
纯靠 ondragenter/ondragleave 切换 class 容易漏帧或状态残留，尤其快速进出时。稳妥做法是监听 dragenter 和 dragleave，但只在 dragenter 中加 class，在 drop 或 dragleave 后延时清除。
示例逻辑：
dropzone.addEventListener('dragenter', () => dropzone.classList.add('is-dragover'));
dropzone.addEventListener('dragleave', () => setTimeout(() => {
if (!dropzone.matches(':hover') && !dropzone.classList.contains('is-dropping')) {
dropzone.classList.remove('is-dragover');
}
}, 10));
dropzone.addEventListener('drop', () => {
dropzone.classList.add('is-dropping');
setTimeout(() => dropzone.classList.remove('is-dropping'), 300);
});关键点：
-
is-dragover表示悬停态，is-dropping表示正在处理态，二者样式应不同 - 延时清除要结合
:hover检测，否则鼠标移出太快会导致样式残留 - 移动端无 drag 事件，这套逻辑需配合
click触发隐藏input[type="file"]作为降级方案
真正的难点不在代码量，而在边界情况处理：空拖拽、跨窗口拖入、快速连续拖放、系统级文件（如 macOS 的 .DS_Store）、浏览器兼容性（Safari 对 dataTransfer.items 支持较弱）。这些不写进基础 demo，但上线前必须覆盖。
