网页拖拽上传需监听dragover和drop事件并调用preventdefault()以启用释放，通过event.datatransfer.files获取文件列表，用formdata封装后fetch上传，同时添加视觉反馈提升体验。
网页文件拖拽上传的核心是正确监听并处理 dragstart、dragover 和 drop 事件，但要注意：真正触发拖拽的是用户从系统桌面/文件管理器拖入浏览器窗口，而不是页面内元素之间的拖拽。因此重点在于拦截“外部文件进入页面”的行为，并提取文件数据。
1. 阻止默认行为，让 drop 可用
浏览器默认会阻止在页面上释放文件（比如打开新页面或下载），所以必须在 dragover 和 drop 事件中调用 event.preventDefault()，否则 drop 根本不会触发。
常见错误：只在 drop 里阻止，默认仍被 dragover 拦截，导致无法释放。
- 给目标区域（如一个
div#drop-area）绑定dragover，里面只写event.preventDefault() - 同样绑定
drop，也调用preventDefault()，再读取event.dataTransfer.files
2. 从 dataTransfer 中安全提取文件列表
event.dataTransfer 是关键对象，它在 drop 时携带了用户拖入的文件信息。注意不是所有 dataTransfer 内容都可用，只认 .files（FileList 对象）。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 用
const files = event.dataTransfer.files获取 FileList（类似数组，但不是 Array） - 可转成数组：
Array.from(files)，方便后续遍历或过滤（如只取图片：.filter(f => f.type.startsWith('image/'))） - 检查是否为空：
if (files.length === 0) return，避免空拖放报错
3. 上传文件：用 FormData + fetch 或 XMLHttpRequest
拿到 File 对象后，不能直接发二进制，需包装进 FormData，再通过 fetch 发送到后端接口。
- 创建
const formData = new FormData() - 循环添加文件：
files.forEach(file => formData.append('file', file))（若支持多文件；单文件可只传第一个） - 发起请求：
fetch('/upload', { method: 'POST', body: formData })，注意不要设Content-Type头，让浏览器自动设置带 boundary - 建议加 loading 状态和错误提示，例如捕获
catch(err => console.error('上传失败:', err))
4. 增强体验：视觉反馈与边界处理
纯功能能用还不够，用户需要明确知道“可以拖”、“正在拖”、“可以放”。可通过 CSS 类 + 事件切换实现：
- 监听
dragenter：添加高亮类（如drag-over），表示文件已进入区域 - 监听
dragleave：移除高亮类（注意嵌套子元素会频繁触发，可用计时器防抖） - 监听
drop后记得清除高亮类，避免残留 - 可额外监听
dragstart—— 但它属于被拖元素触发，对文件上传无用，一般不用管
不复杂但容易忽略：整个流程依赖用户真实拖入本地文件，不能靠 JS 模拟 dataTransfer（出于安全限制）。只要把事件监听、阻止默认、取文件、发请求这四步串通，就能稳定支持拖拽上传。
