拖拽上传

实现思路

1. 监听拖拽事件 dragover、dragleave、drop
2. 阻止默认行为 event.preventDefault()，防止浏览器打开文件
3. 获取拖拽的文件 event.dataTransfer.files

代码示例

html

<div id="dropZone" class="drop-zone">拖拽文件到此区域上传</div>

js

const dropZone = document.getElementById('dropZone')

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault()
  dropZone.classList.add('drag-over')
})

dropZone.addEventListener('dragleave', (event) => {
  event.preventDefault()
  dropZone.classList.remove('drag-over')
})

dropZone.addEventListener('drop', (event) => {
  event.preventDefault()
  dropZone.classList.remove('drag-over')
  const files = event.dataTransfer.files
  console.log('Dropped files:', files)
  // 处理文件上传逻辑
})