HTML5拖拽上传必须在dragover事件中调用event.preventDefault()，否则drop事件不会触发；drop事件中通过e.dataTransfer.files获取文件列表，需转为数组处理，并校验files.length>0以区分文件与链接等非文件内容。
dragover 事件必须阻止默认行为，否则 drop 不会触发
HTML5 拖拽上传的核心是 drop 事件，但它有个硬性前提：目标元素在 dragover 阶段必须调用 event.preventDefault()。浏览器默认会忽略 drop，除非明确告诉它“这里允许投放”。常见错误是只监听 drop 却忘了处理 dragover，结果拖文件到区域后光标始终是“禁止”符号，drop 根本不执行。
- 必须同时监听
dragover和drop -
dragover中只需event.preventDefault()，无需其他逻辑 - 可额外设置
event.dataTransfer.dropEffect = 'copy'改变光标样式（非必需）
从 event.dataTransfer.files 获取 File 对象数组
drop 事件的 event.dataTransfer 是关键入口，其中 files 属性才是真正的文件列表。注意它不是 FileList 的副本，而是只读原生对象，不能用数组方法直接操作；但可以转成数组再处理：
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files); // 转为真数组
files.forEach(file => {
console.log(file.name, file.size, file.type);
});
});
-
e.dataTransfer.files是FileList，类数组，无forEach - 单个
File对象继承自Blob，可直接用于FormData.append() - 拖拽多个文件时，
files.length > 1，需循环上传或合并处理
区分拖拽文件和拖拽网页链接/文本
用户可能拖进来的不是文件，而是 URL、纯文本甚至网页内图片链接——这些也会触发 drop，但 e.dataTransfer.files.length === 0。此时应检查 e.dataTransfer.types 或读取 getData() 内容，避免误判：
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
if (e.dataTransfer.files.length > 0) {
// 真实文件，走上传流程
} else if (e.dataTransfer.types.includes('text/uri-list')) {
// 拖入的是链接，可忽略或提示
console.warn('仅支持文件上传，不支持链接');
}
});
-
e.dataTransfer.files.length === 0是判断是否为文件的最简依据 -
e.dataTransfer.types是字符串数组，包含'Files'表示有文件，但兼容性不如直接查files - 某些浏览器（如 Safari）对非文件拖放行为更宽松，务必做空校验
input[type="file"] 的 accept 属性无法限制拖拽来源
accept 只影响点击 弹出的选择框，对拖拽进来的文件完全无效。拖拽时浏览器不会过滤类型，所有文件都会进入 dataTransfer.files。真正有效的校验必须在 JS 层手动做：
立即学习“前端免费学习笔记（深入）”；
- 检查
file.type（MIME 类型，如'image/png'），但可能为空（尤其本地文件） - 更可靠的是用
file.name匹配后缀，例如/.(jpg|jpeg|png)$/i.test(file.name) - 如需严格校验，得读取文件头（
FileReader+slice()），但会增加延迟
拖拽上传的识别逻辑其实很简单：靠 dataTransfer.files 是否有内容，而不是靠界面配置。很多问题都源于没意识到这个对象才是唯一可信来源。
