dropzone属性无效，需手动监听dragenter、dragover（必调preventdefault）、drop事件；文件提取要区分files与items，注意kind校验；交互闭环需视觉反馈、文件提取、上传发起三者完备。
dropzone 属性本身不触发拖放接收逻辑
HTML 的 dropzone 属性只是个提示性标记（obsolete 且无浏览器实现），**不能让元素真正变成拖放接收目标**。它既不会自动绑定事件，也不影响 DOM 行为。所有现代浏览器都忽略该属性，W3C 也已将其从规范中移除。真要实现文件拖拽上传，必须靠 JavaScript 手动监听 dragenter、dragover、drop 事件，并调用 event.preventDefault() 阻止默认行为——否则浏览器会直接打开或导航到文件。
让元素可接收拖放：三个事件缺一不可
一个容器要成为有效拖放目标，需同时处理以下事件：
-
dragenter：首次拖入容器边界时触发，用于添加视觉反馈（如高亮边框） -
dragover：拖动过程中持续触发，**必须在此调用event.preventDefault()**，否则drop永远不会触发 -
drop：用户松手时触发，从中提取event.dataTransfer.files
漏掉任意一个，尤其是忘记在 dragover 中阻止默认行为，整个拖放流程就会静默失败——看起来“能拖进去”，但没反应、没上传、控制台也无报错。
处理文件对象：注意 dataTransfer.items 与 files 的区别
event.dataTransfer.files 是 FileList 对象，兼容性好，但只包含实际被拖入的文件；而 event.dataTransfer.items 是 DataTransferItemList，支持读取目录（Chrome/Firefox）、剪贴板图像等非文件项（如粘贴截图），但部分浏览器对目录支持不稳定。
常见误判点：
- 仅检查
items.length > 0就认为有文件，却忽略items[i].kind === 'file'判断，导致处理了文本片段或空条目 - 用
items[i].getAsString()处理图片粘贴，但未 fallback 到files，导致拖入文件时逻辑断裂 - 递归遍历
items解析子目录时，未限制深度或未处理拒绝访问错误（SecurityError）
拖放上传的最小可行交互闭环
一个可用的拖放上传区域至少要完成三件事：视觉反馈、文件提取、上传发起。示例代码核心逻辑如下：
<div id="drop-area">拖文件进来</div>
<script>
const dropArea = document.getElementById('drop-area');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
dropArea.addEventListener('dragenter', () => dropArea.classList.add('drag-over'));
dropArea.addEventListener('dragleave', () => dropArea.classList.remove('drag-over'));
dropArea.addEventListener('drop', handleDrop);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files || Array.from(dt.items).filter(i => i.kind === 'file').map(i => i.getAsFile());
if (files.length) uploadFiles(files);
}
</script>
关键细节：类名切换依赖 dragenter/dragleave，但真正的文件提取只在 drop 里做；uploadFiles 应封装为独立函数，避免在事件回调里写上传逻辑，否则难以复用和测试。
最常被跳过的环节是取消拖放状态的清理——比如用户拖进又拖出，但 dragleave 没触发（因鼠标移动过快或跨 iframe），导致界面卡在“正在拖入”状态。实际项目中建议加防抖 + 定时 fallback 清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
