HTML5拖拽API仅捕获拖放动作并获取FileList，上传需配合FileReader或FormData与fetch/XHR；dragover和drop事件必须调用preventDefault()，否则流程中断；应直接使用dataTransfer.files而非items，移动端需降级为file input。
HTML5拖拽API本身不直接上传文件，它只负责捕获拖放动作和获取文件对象；真正上传得靠 FileReader 或 FormData 配合 fetch / XMLHttpRequest —— 这是初学者最容易混淆的一点。
拖放事件监听必须阻止默认行为，否则会跳转或打开文件
浏览器对文件拖入页面有默认处理（比如用本机应用打开），不阻止就会中断拖放流程。关键事件是 dragover 和 drop，且两者都必须调用 event.preventDefault()：
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须！否则不会触发 drop
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault(); // 必须！否则可能跳转到文件URL
const files = e.dataTransfer.files; // 获取拖入的 FileList
handleFiles(files);
});
-
dragenter可选，常用来加高亮样式，但不阻止默认行为也不会影响流程 -
dragleave常用于移除高亮，注意它会在子元素间频繁触发，需用relatedTarget判断是否真离开了目标区域 - 只监听
drop就够了，dragstart和dragend是源元素事件，和文件上传无关
dataTransfer.files 是唯一可靠入口，别试图读取 dataTransfer.items 或 types
虽然 dataTransfer.items 看起来更“现代”，但它在跨浏览器时行为不一致：Safari 不支持 getAsFile()，Firefox 对文件夹返回空，Chrome 在某些版本里会把文本内容也塞进来。稳妥做法是直接用 e.dataTransfer.files：
function handleFiles(fileList) {
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
if (!file.type.startsWith('image/')) continue; // 示例：只处理图片
console.log(file.name, file.size, file.type);
uploadFile(file); // 后续上传逻辑
}
}
-
fileList是FileList对象，不是数组，不能直接用map或展开运算符，需用Array.from()转换（如果要链式操作） - 不要依赖
dataTransfer.types判断是否为文件，它在不同系统下返回值差异大（如 macOS 返回Files，Windows 返回application/x-moz-file） - 用户可能一次拖多个文件，
files.length可能大于 1，需遍历处理
上传必须用 FormData，别用 FileReader.readAsDataURL 传 base64
很多教程用 readAsDataURL 把文件转成 base64 再发给后端，这会导致体积膨胀约 33%，且服务端解析负担加重。正确做法是构造 FormData 直接提交二进制流：
立即学习“前端免费学习笔记（深入）”；
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file); // key 名需和服务端约定一致
fetch('/upload', {
method: 'POST',
body: formData,
// 注意：不要手动设置 Content-Type，让浏览器自动生成带 boundary 的 multipart/form-data
})
.then(r => r.json())
.then(console.log)
.catch(console.error);
}
- 使用
FormData时，fetch会自动设置正确的Content-Type头（含boundary），手动设反而会出错 - 如果需要额外字段（如用户ID、分类），用
formData.append('user_id', '123')即可，服务端同理接收 - 大文件上传建议加进度监听：用
XMLHttpRequest.upload.onprogress，因为fetch目前不支持上传进度
最常被忽略的是 dragover 事件的 preventDefault —— 少写这一行，整个拖放就静默失败，控制台还不会报错。另外，移动端不支持原生拖放文件，得降级为点击 。
