如何利用 HTML 原生 input type="file" 实现支持多图拖拽上传的按钮

拖拽上传需拦截dragover/drop默认事件，input必须设multiple属性，用label关联实现点击触发，文件须通过FormData.append逐个提交。

拖拽区域必须拦截默认事件，否则文件会直接在浏览器中打开

原生 input[type="file"] 本身不支持拖拽，得靠 dragover 和 drop 事件模拟。但浏览器对拖入文件有默认行为——比如图片会被直接打开，导致上传中断。关键是在 dragover 和 drop 的监听里调用 event.preventDefault()，否则拖拽根本不会生效。

实操建议：

1. 给容器（比如一个 <div>）绑定 dragover 和 drop，不是给 input 本身绑
2. dragover 只需阻止默认行为，不用做其他事；drop 中再取 event.dataTransfer.files
3. 别忘了同时监听 dragenter 和 dragleave 来加/去拖拽高亮样式（可选但体验更好）

多图上传必须显式设置 input 的 multiple 属性

即使用户拖入 10 张图，如果 input 没加 multiple，event.dataTransfer.files 或 input.files 都只会取第一张。这个属性不是可有可无的装饰，而是决定浏览器是否允许多选的核心开关。

实操建议：

1. <input type="file" multiple accept="image/*"> —— multiple 和 accept 都要写上
2. accept="image/*" 能过滤非图片类型，但不能完全依赖它，后端仍需校验 MIME 类型
3. 不要用 click() 触发隐藏的 input 后再手动赋值 files：DOM 不允许脚本写入 files，会报错 Failed to set the 'files' property

用 label 包裹 input 实现“点击上传”和样式解耦

想让任意元素（比如一个带文字的卡片）变成上传触发区，最稳妥的方式是用 <label> 关联 input，而不是靠 JS 模拟点击。这样既语义正确，又兼容屏幕阅读器，还能绕过移动端 click 延迟问题。

实操建议：

1. <label for="upload-input">拖拽或点击上传</label><input id="upload-input" type="file" multiple accept="image/*">
2. 把 input 设为 position: absolute; clip: rect(0 0 0 0); 隐藏但保留在可访问流中
3. 拖拽事件仍绑在 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，否则后端只收到一张。

实操建议：

1. const fd = new FormData(); for (const file of files) fd.append('images', file); —— 字段名用复数或带索引都行，但别用 fd.append('images[]', file)，PHP 风格语法前端不认
2. 如果需要额外参数（如 album_id），也用 fd.append('album_id', '123') 加进去，别混在 URL query string 里
3. 注意 fetch 不要设 Content-Type 头，让浏览器自动设 multipart/form-data 并带上 boundary

拖拽上传看着简单，实际卡点全在事件拦截、multiple 属性、FileList 传递和 FormData 构造这四步。漏掉任一环，都会出现“能拖但没反应”“只传一张”“后端收不到文件”这类问题。