JavaScript 文件拖拽上传需监听 dragover 和 drop 事件，阻止默认行为后从 dataTransfer.files 提取文件，校验大小与类型，用 FormData 附加并 fetch 上传；配合视觉反馈、错误提示及传统 file input 兜底。
JavaScript 中处理文件拖拽上传，核心在于监听 drag 系列事件（dragover、drop）并从 dataTransfer 对象中提取文件，再通过 FormData 和 fetch 或 XMLHttpRequest 上传。
监听拖拽区域并阻止默认行为
浏览器默认会打开拖入的文件（如图片、PDF），所以必须在 dragover 和 drop 事件中调用 event.preventDefault()，否则无法触发 drop。
- 给目标容器（如
<div id="drop-area">）绑定dragover和drop -
dragover只需阻止默认行为，可顺便加个视觉反馈（比如高亮边框） -
drop中读取event.dataTransfer.files—— 这是FileList，类似数组，可用Array.from()转为数组操作
提取并校验拖入的文件
不是所有拖入内容都是文件（比如文字、链接），要过滤出真实文件对象。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 检查
dataTransfer.items（支持 DataTransferItem API）或直接用dataTransfer.files - 跳过非文件项：
item.kind === 'file'，再用item.getAsFile()获取 File 实例 - 常见校验：文件大小（
file.size <= 10 * 1024 * 1024）、类型（file.type.startsWith('image/') || file.name.endsWith('.pdf')） - 注意：Safari 对
dataTransfer.items支持较弱，建议以files为主，items为辅
构造 FormData 并上传
拖拽得到的 File 对象可直接 append 到 FormData，无需转 base64，更省内存、更高效。
立即学习“Java免费学习笔记（深入）”；
- 创建
const formData = new FormData() - 循环文件列表：
formData.append('files', file, file.name)（第三个参数保留原始文件名） - 用
fetch上传：fetch('/upload', { method: 'POST', body: formData }) - 服务端接收的是
multipart/form-data，和普通表单提交一致；若需进度条，改用XMLHttpRequest监听upload.onprogress
补充体验细节
提升可用性的小技巧：
- 拖入时添加
dragenter/dragleave切换样式（如背景色、边框），让用户明确知道“可以松手了” - 多个文件支持：
files天然支持多选，无需额外逻辑 - 错误提示：校验失败时用
alert或 DOM 插入提示，别只 console.log - 兼容性兜底：提供传统
<input type="file">作为备用入口
