javascript拖拽读取文件需两步：先监听dragover和drop事件并调用preventdefault()获取file对象，再用filereader异步读取；注意移动端不支持拖放，大文件应避免readasdataurl()而优先用url.createobjecturl()。
拖拽文件后读取内容，核心就两步：正确拿到 File 对象，再用 FileReader 安全读取。跳过任意一环都会卡在“没反应”或“报错”上。
drop 事件里为什么 event.dataTransfer.files 是空的
这是最常踩的坑——只监听 drop 却漏了 dragover。浏览器默认会拦截拖放行为，dataTransfer.files 只有在 dragover 和 drop 两个事件中都调用了 event.preventDefault() 才能访问。
- 必须同时绑定并阻止这两个事件，缺一不可
-
dragenter里调preventDefault()不起作用，别白费力气 - 移动端（iOS Safari）完全不支持拖放，得降级用
<input type="file"> - 测试时别用 Chrome 的“拖拽网页标签页”来模拟，它不会触发
dataTransfer.files
FileReader 读图片卡死或内存爆掉怎么办
直接对几十个大图调 readAsDataURL()，页面大概率卡住甚至崩溃。这不是代码写错了，而是设计误判：base64 编码会让体积膨胀 ~33%，10MB 图片变成 13MB 字符串塞进内存。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 预览优先用
URL.createObjectURL(file)，它返回一个 blob URL，不读文件内容，秒出预览 - 用完记得立刻调
URL.revokeObjectURL(url)，否则内存泄漏 - 真要读取内容（比如校验 EXIF、提取文本），先按
file.size过滤，>5MB 的文件别硬读 - 批量处理时别用 for 循环同步调
readAsDataURL()，改用 Promise 队列或分批执行
怎么判断是不是图片、要不要读取
别信 file.name 后缀，用户改个 .jpg 后缀就能绕过校验。真实类型藏在 file.type 里，但注意它可能为空（比如本地未注册 MIME 类型的文件）。
- 图片校验优先用
file.type.startsWith('image/') - type 为空时，可 fallback 到
file.name.match(/\.(jpg|jpeg|png|gif|webp)$/i)，但仅作辅助 - 视频、PDF 等非文本文件，
readAsText()会乱码，别乱试 - 上传前校验大小，
if (file.size > 20 * 1024 * 1024)直接continue或报错提示
真正难的不是“怎么写”，而是“什么时候不该读”——看到 FileList 就一股脑全塞给 FileReader，是绝大多数线上问题的根源。控制权在你手上：哪些文件需要预览，哪些只需上传，哪些直接丢弃，得靠 file.type 和 file.size 在最外层就筛干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
