HTML Drag and Drop API：文件拖放与数据传输

---

title: HTML Drag and Drop API：文件拖放与数据传输

keywords:

• Drag and Drop
• DataTransfer
• 文件拖放
• drop 事件
• 类型过滤

description: 使用原生拖放 API 进行文件与数据传输，规范拖放目标与类型过滤，提升交互与安全性。

categories:

• 文章资讯
• 编程技术

---

概述

原生拖放通过 dragenter/dragover/dragleave/drop 事件与 DataTransfer 实现。可以读取拖入的文件列表并做类型过滤与预览。

用法/示例

const box = document.getElementById('drop')
box.addEventListener('dragover', e => { e.preventDefault(); box.classList.add('hover') })
box.addEventListener('dragleave', () => box.classList.remove('hover'))
box.addEventListener('drop', async e => {
  e.preventDefault()
  const files = [...e.dataTransfer.files].filter(f => /image\/.+/.test(f.type))
  for (const f of files) {
    const url = URL.createObjectURL(f)
  }
})

工程建议

• 明确拖放区域与视觉提示，避免误操作；限制文件类型与大小并进行清理。
• 对敏感数据禁止拖入，提示用户风险；在移动端提供替代上传入口。
• 与 File System Access/Clipboard 协作，提升文件输入体验。

参考与验证

• MDN：HTML Drag and Drop — https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API