datatransfer.files 是只读的，无法通过 add() 或赋值修改；必须在 dragover 和 drop 中调用 preventdefault() 才能获取文件；校验需结合 type 和 name 扩展名；添加文件应使用 input[type=file] 并维护本地数组。
dataTransfer.files 是只读的，不能手动添加文件
你无法通过 dataTransfer.files.add() 或类似方式向 dataTransfer.files 写入文件——这个 FileList 对象是浏览器在拖拽发生时**只读注入**的，JavaScript 没有 API 可以修改它。试图赋值、push 或 splice 都会静默失败或抛出错误。
常见误解是想“预填充”上传队列，比如用户还没拖，就先塞一个测试文件进去。这行不通。真实场景中，dataTransfer.files 只会在用户真正把文件拖进页面并触发 drop 事件后才被填充。
- 所有合法文件来源只能是：用户拖拽进页面、或通过
<input type="file">选择 -
dataTransfer.items同样只读，但比files多一层抽象（支持非文件项如字符串、HTML 片段） - 若需模拟多文件上传逻辑，应自己维护一个
Array<file></file>，而不是试图篡改dataTransfer
想让 drop 事件拿到文件，必须阻止默认行为
即使用户把文件拖进来了，event.dataTransfer.files 在 drop 里仍是空的——如果没在 dragover 和 drop 中调用 event.preventDefault()。浏览器会按默认逻辑打开 HTML 文件、预览图片、或导航离开页面，根本不会把文件交给你。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须在
dragover事件中立即执行event.preventDefault()，否则drop根本不会触发 -
drop事件里也要preventDefault()，防止浏览器尝试渲染或下载文件 - 仅靠
event.stopPropagation()不够，它不阻止浏览器默认动作
从 dataTransfer.files 读取文件要校验 type 和 name
dataTransfer.files 返回的是 FileList，但它不保证每个 File 都是有效文件：可能为空、类型错误、或被重命名绕过检查。不能只看 file.type，还要结合 file.name 扩展名。
- 检查
file.type === ""的情况（某些系统/编辑器导出的文件无 MIME 类型） - 用正则匹配扩展名：
file.name.match(/\.html?$/i)比单纯依赖file.type === "text/html"更可靠 - 大文件上传前建议检查
file.size，避免前端卡死或后端拒绝（例如限制 ≤ 10MB） - 注意：Safari 对某些拖拽来源（如邮件附件）可能返回空
type，此时扩展名是唯一依据
需要“添加文件”逻辑？用 input[type=file] + addEventListener 模拟
如果你的目标是让用户能多次添加文件（比如“+ 添加更多”按钮），不要折腾 dataTransfer，直接用原生 <input type="file" multiple> 并监听 change 事件。它返回的 event.target.files 和 dataTransfer.files 类型一致，可统一处理。
- 隐藏原生
input，用按钮触发click()实现 UI 解耦 - 每次
change后把event.target.files追加到自己的pendingFiles = []数组 - 上传时遍历该数组，构造
FormData，无需区分来源是拖还是点选 - 这样既兼容移动端（无 drag/drop），又规避了
DataTransfer的只读限制
真正难的不是“怎么加”，而是“怎么不让用户误以为能加”——很多 UI 问题源于对 dataTransfer.files 可写性的错误假设。它只是通道，不是容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
