拖拽上传需显式设置draggable="false"、role="region"、aria-label和tabindex="0"，并监听dragenter/dragover/drop事件且调用preventDefault()；FileList须转数组处理，移动端必须提供input file点击回退。
拖拽区域的 HTML 结构必须包含 dropzone 语义化属性和可聚焦状态
仅用 <div> 包裹是不够的，浏览器默认不会把普通 <div> 当作可拖拽目标。必须显式声明 draggable="false"（防止内部文本被拖走），并添加 role="region" 和 aria-label="上传文件区域" 以支持无障碍访问。最关键的是要监听 dragover 事件并调用 event.preventDefault()，否则浏览器会执行默认行为（打开文件、导航跳转等）。
推荐结构如下：
<div id="upload-dropzone" draggable="false" role="region" aria-label="上传文件区域" tabindex="0"> <strong>拖拽文件到这里，或点击选择</strong> </div>
-
tabindex="0"让区域可通过键盘获得焦点，支持空格/回车触发文件选择 - 不要给该元素设置
contenteditable="true"，否则在某些浏览器中会干扰drop事件触发 - 避免嵌套
<a>或<button>作为外层容器——它们自带交互逻辑，容易与拖拽事件冲突
dragenter 和 dragover 的区别与绑定时机
dragenter 只触发一次，表示拖拽对象首次进入目标区域；dragover 持续触发（约每 30–50ms 一次），用于实时反馈。但两者都必须在事件处理函数中调用 event.preventDefault()，否则 drop 事件永远不会触发。
常见错误是只绑了 drop 却漏掉前两者，导致“松手没反应”。正确做法是三者统一绑定，并复用同一个阻止默认行为的函数：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
const dropzone = document.getElementById('upload-dropzone');
const preventDefaults = (e) => {
e.preventDefault();
e.stopPropagation();
};
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, preventDefaults, false);
});
-
dragleave虽不强制，但可用于移除高亮样式（如加边框） - 不要在
dragover中做 heavy 操作（如读取FileList），它太频繁，会卡 UI - 移动端 Safari 不支持
dragenter/dragover，需 fallback 到点击触发<input type="file">
从 event.dataTransfer.files 提取文件的注意事项
drop 事件的 event.dataTransfer.files 是一个 FileList 对象，不是数组，不能直接用 .map() 或展开语法。需要先转成数组才能批量处理：
dropzone.addEventListener('drop', (e) => {
const files = Array.from(e.dataTransfer.files);
// ✅ 现在可以 .filter()、.forEach() 了
});
- 检查
files.length === 0是必须的——用户可能拖了文件夹、URL 或截图（部分系统会生成空FileList） - 注意
files中的每个File对象继承自Blob，有name、size、type，但没有路径（出于安全限制） - 若用户拖入多个同名文件（如两个
report.pdf），浏览器会自动重命名第二个为report(1).pdf，无需手动去重
兼容性兜底：iOS / Android 上无法拖拽时的替代方案
iOS Safari 完全不支持 dragenter/dragover/drop，Android Chrome 虽支持但对文件夹拖拽支持差。因此必须提供显式点击入口，并隐藏在拖拽区域内部：
<div id="upload-dropzone"> <strong>拖拽文件到这里，或点击选择</strong> <input type="file" id="file-input" multiple style="display: none;"> </div>
然后绑定点击事件并触发 click()：
dropzone.addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', (e) => {
const files = Array.from(e.target.files);
handleFiles(files); // 你的上传逻辑
});
- 不要用
label[for]包裹input并设display: block——这会导致 iOS 上点击无响应 - 不要监听
input的click事件来触发文件选择，会造成循环调用 - 如果项目需支持文件夹上传，得额外检查
webkitdirectory属性，且仅限桌面 Chrome/Firefox
拖拽上传最易被忽略的点是：没有在 dragover 阶段做视觉反馈，用户不知道是否“悬停成功”；以及在移动端完全没准备 fallback，导致整个功能在 iPhone 上不可用。
