拖拽上传区必须用容器元素绑定dragover和drop事件并调用preventDefault()，文件从e.dataTransfer.files获取；隐藏input用于点击上传，需同步处理change事件。
拖拽区域的 HTML 结构必须包含 dropzone 属性和可感知的视觉反馈
浏览器原生不识别“拖拽上传区”，dropzone 不是标准属性，纯靠 CSS 类 + JS 控制。结构上只需一个容器元素（如 <div>），但必须满足两个硬性条件：一是能接收 dragover 和 drop 事件，二是默认阻止浏览器打开文件行为。常见错误是直接用 <input type="file"> 做拖拽目标——它无法触发 drop，只能点选。
推荐结构：
<div id="upload-area" class="drop-area"> <p>拖拽文件到这里</p> <input type="file" id="file-input" multiple style="display: none;"> </div>
关键点：
-
id="upload-area"是事件绑定主目标，不能是input本身 -
<input type="file">隐藏但保留，用于兼容点击上传或调用click() - 不要给容器设
contenteditable="true"或嵌套可聚焦元素（如button），否则dragover可能被拦截
dragover 事件里必须调用 preventDefault() 否则拖入无效
这是最常踩的坑：只监听 drop 却忘了 dragover。浏览器在文件拖入页面时，会先频繁触发 dragover，若未阻止默认行为，就会走浏览器默认处理（比如显示“禁止”图标、最终跳转到文件预览页）。
立即学习“前端免费学习笔记（深入）”；
正确写法：
const area = document.getElementById('upload-area');
area.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须！没有这句，后续 drop 不会触发
e.stopPropagation();
});
注意：
-
preventDefault()必须在dragover中调用，且不能放在异步回调里 - 如果区域有滚动容器（如
overflow: auto），需确保事件冒泡没被中途截断 - 部分旧版 Safari 要求同时监听
dragenter并调用preventDefault()，但现代 Chrome/Firefox/Edge 仅dragover即可
从 drop 事件中提取文件要用 e.dataTransfer.files 而非 e.target.files</H3>
<p><code>drop
事件对象里的文件列表不在 e.target 上，也不在隐藏的 input 元素里，而是在 e.dataTransfer.files —— 这是只读的 FileList 对象。误用 document.getElementById('file-input').files 会返回空，因为该 input 根本没被触发。
典型提取逻辑：
area.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files; // ✅ 正确来源
if (files.length === 0) return;
// 可选：过滤非文件项（如拖入文件夹时某些系统会带空项）
const validFiles = Array.from(files).filter(f => f instanceof File);
handleFiles(validFiles); // 自定义上传函数
});
补充说明：
-
dataTransfer.files和input.files类型一致，都可用File.name、File.size、File.type访问 - 拖入文件夹时，Chrome 返回空
FileList（不支持文件夹拖拽），Firefox/Safari 行为不一，建议加if (!files.length)安全判断 - 不支持通过
dataTransfer获取文件路径（出于安全限制），File.path在浏览器中始终为""
兼容点击上传时需手动触发 input.click() 并同步处理 change 事件
拖拽只是交互方式之一，用户仍可能点击区域触发选择框。此时不能依赖 drop，而要桥接 input 的 change 事件。但要注意：直接给 upload-area 绑定 click 再调 input.click()，会导致移动端双击放大或 PC 端焦点错乱。
稳妥做法：
area.addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', (e) => {
const files = e.target.files; // ✅ 此处才用 e.target.files
handleFiles(Array.from(files));
});
容易忽略的细节：
- 移动端 Safari 对
click()有限制：必须由用户手势（如touchend）触发，不能在异步回调里调；所以click绑定在area上是最安全的 - 如果上传区含文字提示，避免把
<p>设为pointer-events: none，否则点击文字不会触发click事件 - 多次点击后
input的change可能不触发（因文件未变），需在click时先清空value：input.value = ''
preventDefault()，还有混淆 dataTransfer.files 和 input.files 的时机。别碰 webkitDirectory 或尝试读取文件路径——那些不是标准，也不该是你的责任。 
