如何实现文件拖动上传？

前端实现文件拖动上传主要依靠 HTML5 的拖放 API 和 File API。以下是一个基本的实现步骤，并附带一些解释和最佳实践：

1. 设置目标区域:

首先，你需要一个 HTML 元素作为文件的拖放目标区域。这通常是一个 <div> 或其他合适的容器。你需要设置 ondragover 和 ondrop 事件处理程序。

<div id="drop-area" style="width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center;">
  拖拽文件到这里
</div>

2. 阻止默认行为 (ondragover):

浏览器默认会阻止拖放操作。你需要在 ondragover 事件中阻止默认行为，才能让 ondrop 事件触发。

const dropArea = document.getElementById('drop-area');

dropArea.ondragover = (event) => {
  event.preventDefault(); // 阻止默认行为
};

3. 处理文件 (ondrop):

在 ondrop 事件中，你可以获取拖放的文件，并进行上传操作。

dropArea.ondrop = (event) => {
  event.preventDefault(); // 阻止默认行为

  const files = event.dataTransfer.files;

  for (const file of files) {
    // 使用 FormData 上传文件
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', { // 替换 /upload 为你的上传接口
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
      // 处理上传成功后的逻辑，例如显示上传进度或文件名
    })
    .catch(error => {
      console.error('上传失败:', error);
      // 处理上传失败的逻辑
    });
  }
};

4. 增强用户体验:

视觉反馈: 在 dragenter 和 dragleave 事件中，可以添加一些视觉提示，例如改变目标区域的背景颜色或边框，让用户知道可以进行拖放操作。

dropArea.ondragenter = (event) => {
  dropArea.style.backgroundColor = '#eee';
};

dropArea.ondragleave = (event) => {
  dropArea.style.backgroundColor = 'transparent';
};

文件类型过滤: 你可以在 ondrop 事件中检查文件的类型和大小，并拒绝不符合要求的文件。

if (!file.type.startsWith('image/')) {
  console.error('只允许上传图片文件');
  return;
}

if (file.size > 1024 * 1024 * 2) { // 2MB
  console.error('文件大小不能超过 2MB');
  return;
}

上传进度显示: 使用 XMLHttpRequest 或 fetch API 上传文件时，可以监听 progress 事件来显示上传进度。

完整示例 (简化):

<div id="drop-area" style="width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center;">
  拖拽文件到这里
</div>

<script>
  // ... (上面的 JavaScript 代码) ...
</script>