拖拽上传需拦截dragover/drop默认事件，input必须设multiple属性，用label关联实现点击触发，文件须通过FormData.append逐个提交。
拖拽区域必须拦截默认事件，否则文件会直接在浏览器中打开
原生 input[type="file"] 本身不支持拖拽，得靠 dragover 和 drop 事件模拟。但浏览器对拖入文件有默认行为——比如图片会被直接打开，导致上传中断。关键是在 dragover 和 drop 的监听里调用 event.preventDefault()，否则拖拽根本不会生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器（比如一个
<div>）绑定dragover和drop，不是给input本身绑 -
dragover只需阻止默认行为，不用做其他事；drop中再取event.dataTransfer.files - 别忘了同时监听
dragenter和dragleave来加/去拖拽高亮样式（可选但体验更好）
多图上传必须显式设置 input 的 multiple 属性
即使用户拖入 10 张图，如果 input 没加 multiple，event.dataTransfer.files 或 input.files 都只会取第一张。这个属性不是可有可无的装饰，而是决定浏览器是否允许多选的核心开关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<input type="file" multiple accept="image/*">——multiple和accept都要写上 -
accept="image/*"能过滤非图片类型，但不能完全依赖它，后端仍需校验 MIME 类型 - 不要用
click()触发隐藏的input后再手动赋值files：DOM 不允许脚本写入files，会报错Failed to set the 'files' property
用 label 包裹 input 实现“点击上传”和样式解耦
想让任意元素（比如一个带文字的卡片）变成上传触发区，最稳妥的方式是用 <label> 关联 input，而不是靠 JS 模拟点击。这样既语义正确，又兼容屏幕阅读器，还能绕过移动端 click 延迟问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
<label for="upload-input">拖拽或点击上传</label><input id="upload-input" type="file" multiple accept="image/*">- 把
input设为position: absolute; clip: rect(0 0 0 0);隐藏但保留在可访问流中 - 拖拽事件仍绑在 label 或外层容器上，
drop后调用input.files = dataTransfer.files不行，得用FileList构造或 FormData 直接传
FormData.append() 是唯一安全的多图提交方式
不能把 FileList 直接塞进 fetch 的 body，会报 TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body 或更隐蔽的序列化失败。必须用 FormData 包装，且每张图要单独 append，否则后端只收到一张。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
const fd = new FormData(); for (const file of files) fd.append('images', file);—— 字段名用复数或带索引都行，但别用fd.append('images[]', file)，PHP 风格语法前端不认 - 如果需要额外参数（如 album_id），也用
fd.append('album_id', '123')加进去，别混在 URL query string 里 - 注意
fetch不要设Content-Type头，让浏览器自动设multipart/form-data并带上 boundary
拖拽上传看着简单，实际卡点全在事件拦截、multiple 属性、FileList 传递和 FormData 构造这四步。漏掉任一环，都会出现“能拖但没反应”“只传一张”“后端收不到文件”这类问题。
