dragover 事件必须调用 preventDefault() 才能接收文件，否则 drop 不触发；FileList 需用 Array.from() 转为数组，不可直接操作；input[type="file"] 仅作降级和属性提示，不可赋值。
dragover 事件必须调用 preventDefault() 才能接收文件
浏览器默认禁止网页接收拖入的文件，这是安全机制。不阻止 dragover 的默认行为，光标会变成“禁止”图标，drop 根本不会触发——哪怕你写了监听函数也没用。
- 只监听
drop而漏掉dragover是最常见错误 -
dragover回调里只需做两件事：e.preventDefault()和e.stopPropagation()，其他逻辑（比如校验、样式切换）全都不该放这儿 - 某些旧版 Safari 还需额外加一句：
e.dataTransfer.dropEffect = 'copy' - 如果容器里有
contenteditable="true"或嵌套iframe，事件可能被拦截，得检查冒泡路径
drop 事件中读取 dataTransfer.files 要转真数组
event.dataTransfer.files 是 FileList 类型，不是 Array，不能直接用 map、filter 或展开运算符。硬转会丢属性或报错。
- 正确写法是：
const files = Array.from(e.dataTransfer.files) - 拖入空文件夹时，
files.length可能为 0（尤其 macOS Safari），必须判断，否则后续逻辑崩 -
items里可能混着文本、URL 等非文件项，除非你要处理粘贴图片，否则别碰dataTransfer.items - 同一文件多次拖入，
file.name相同但file.lastModified不同，单靠文件名去重会漏判
input[type="file"] 在拖拽流程里只起降级和属性复用作用
它不是拖拽上传的“主通道”，而是兜底入口和前端限制的载体。你无法把拖拽拿到的 FileList 赋值给 input.files（只读属性），所以别浪费时间尝试。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 真正用途只有两个：提供“点击选择文件”的降级路径；复用其
accept、capture属性做类型提示（注意：这些对拖拽无效，仅约束点击行为） - 拖拽拿到的
File对象，要自己用FormData.append('file', file)构造上传体 - 预览图片时，用
FileReader.readAsDataURL()，别试图让input触发change事件来模拟
容器结构必须用块级元素且设 draggable="false"
draggable="true" 是给可拖动源用的（比如拖一个 div 到另一处），和文件上传完全无关。文件拖拽的目标容器反而要显式设 draggable="false"，否则可能意外拖走内部文字。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<div>或其他块级元素作容器，不能只靠<input type="file">套<label>—— 那只响应点击，不响应drop - 容器建议加
role="region"或aria-label，提升可访问性 - 避免用
<form>直接包裹拖拽区，表单默认提交行为可能吞掉drop事件 - 别设
contenteditable="true"，它会抢走drop事件，导致文件进不来
dragover 没阻止默认行为，或是把 FileList 当数组直接操作。这两个点一错，整个流程就静默失败，连控制台都不报错。 
