drop事件未触发是因为dragover阶段未调用e.preventdefault(),浏览器默认拦截拖放;必须在dragover中阻止默认行为才能使drop执行,且drop中也要preventdefault防止文件被打开或下载。

drop事件为什么没触发?必须阻止dragover默认行为
浏览器对拖入文件有强默认行为:打开图片、下载文本、跳转链接。不显式干预,drop根本不会执行——它被浏览器直接拦截了。
关键点只有一条:dragover事件里必须调用e.preventDefault()。这不是可选项,是硬性前提。很多开发者只在drop里阻止,默认行为已在dragover阶段被拒绝,导致drop压根不进回调。
-
dragover只负责“允许放置”,不传文件,但必须阻止默认行为 -
drop才是取文件的地方,同样要e.preventDefault()(防止打开/下载) - 别给
<form></form>绑事件——它不响应拖放,用<div class="drop-area">这类容器承接<h3>从event.dataTransfer.files拿到的是FileList,不是数组</h3> <p><code>event.dataTransfer.files返回的是FileList对象,类数组但没有map、filter等方法。直接遍历要用for...of或Array.from()转成真数组。每个
File对象自带name、size、type属性,可用于校验。注意type由浏览器根据文件扩展名和魔数推测,不可信,仅作前端快速过滤。- 大文件(如>10MB)建议提前
if (file.size > 10 * 1024 * 1024) continue跳过 - 类型限制写成
if (!['image/jpeg', 'image/png'].includes(file.type))比后缀判断更稳 - 不要用
file.name.split('.').pop()取后缀——文件可能无后缀,或后缀被伪造
用FormData上传时,字段名必须和服务端约定一致
FormData.append('file', file)里的'file'不是随便写的。它对应后端接收字段名,比如Express用req.files.file,Django用request.FILES['file']。错一个字符就收不到。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
多文件场景下,后端若要求
files[0]、files[1]这种带索引的键名,FormData不自动处理,得手动拼:formData.append(`files[${i}]`, file);另外,千万别手动设置
Content-Type头。用fetch发FormData时,浏览器会自动生成带boundary的multipart/form-data,你设了反而让后端解析失败。服务端不配client_max_body_size,前端再对也没用
前端能拖、能读、能发,但Nginx默认只允许1MB请求体。用户拖个20MB视频,
fetch会卡在pending,控制台连错误都不报——因为请求根本没到你的Node.js或Python进程,被Nginx拦在门外了。这个配置必须改,且要同步检查后端框架限制(如Express的
limit、Django的DATA_UPLOAD_MAX_MEMORY_SIZE)。- Nginx:加
client_max_body_size 100M;到http、server或location块 - Node.js(Express):
app.use(express.json({ limit: '100mb' })); app.use(express.urlencoded({ limit: '100mb', extended: true })); - 别忘了后端还要校验MIME类型、扫描恶意内容——前端限制全是可绕过的
- 大文件(如>10MB)建议提前










