dragover事件必须调用preventdefault()才能启用文件拖放，否则浏览器禁止投放；drop中需用array.from()转换datatransfer.files为真数组，并注意跨浏览器兼容性与移动端降级。
dragover 事件必须阻止默认行为，否则文件进不来
浏览器对拖放文件有严格限制：只要没在 dragover 阶段调用 event.preventDefault()，系统就认为该区域不接受文件，光标会变成“禁止”图标，松手也没反应。这不是 bug，是安全机制。
常见错误是只监听 drop，漏掉 dragover；或者写了但没加 preventDefault()：
element.addEventListener('dragover', (e) => {
// ❌ 错误：没阻止默认行为
console.log('hover');
});
正确写法必须显式阻止：
element.addEventListener('dragover', (e) => {
e.preventDefault(); // ✅ 关键一步
e.stopPropagation();
});
-
dragover是持续触发的，不用做复杂逻辑，只负责“开门” - 如果元素带
contenteditable或是iframe子级，可能需额外处理冒泡 - 部分旧版 Safari 要求同时设置
event.dataTransfer.dropEffect = 'copy'
drop 事件里用 dataTransfer.files 读取文件列表
drop 触发后，真正的文件对象藏在 event.dataTransfer.files 中，它是 FileList 类型（类似数组但不是 Array），不能直接用 map 或展开运算符。
典型误操作：
// ❌ 错误：当成普通数组用 const files = [...e.dataTransfer.files]; // 可能报错或丢失属性 files.forEach(f => upload(f));
稳妥做法是转成真数组再处理：
const files = Array.from(e.dataTransfer.files);
files.forEach(file => {
if (file.type.startsWith('image/')) {
previewImage(file); // 示例：预览图片
}
});
-
File对象含name、size、type、lastModified等字段，可直接校验 - 拖入文件夹时，
dataTransfer.files为空（浏览器不支持目录拖放），需用webkitGetAsEntry才能递归读取（仅 Chromium） - 注意：同一文件多次拖入，
File.name相同但File.lastModified可能不同，别单靠文件名去重
DRAGGABLE 属性只是起点，真正交互靠 JS 绑定事件
draggable="true" 只控制元素能否被鼠标拖起，和文件上传完全无关。它影响的是 dragstart/dragend 这类“源端”事件，而文件上传依赖的是目标区域的 dragover/drop —— 这两者不互通。
所以：draggable="true" 加在上传区上是无效的，甚至可能干扰体验（比如文字被意外选中拖动）。
- 目标容器（如
<div id="drop-zone">）不需要设 <code>draggable - 如果页面有可拖拽排序的卡片，又想共用同一区域接收文件，得在
dragstart里判断e.dataTransfer.types区分是“拖文件”还是“拖卡片” - 移动端不支持原生 drag/drop，得降级为点击选择
<input type="file"> -
file.size单位是字节，10MB 要写成10 * 1024 * 1024，不是10 * 1000 * 1000 -
file.type在某些系统（如 macOS）可能为空，得 fallback 到文件扩展名解析（用file.name.split('.').pop()） - 多个文件同时拖入时，总大小叠加可能超限，要累加判断而非单个校验
- Chrome 对大于 4GB 的文件会静默截断，
file.size显示异常，需结合Blob.slice()分片检测实际可读长度
上传前校验容易漏掉 size 和 type 的边界情况
用户可能拖入超大文件或伪装后缀的恶意文件，仅靠前端校验不能替代服务端检查，但能快速反馈提升体验。
常见疏忽点：
拖放上传不是把文件塞进 FormData 就完事——真正难的是让每次拖入都稳定响应、准确识别、平滑降级。特别是跨浏览器时，dataTransfer.items 和 dataTransfer.files 的兼容性差异，往往在测试末期才暴露。
