拖拽文件上传的实现与优化

2023-10-06 10:11:27

拖拽文件上传是一种非常方便的文件上传方式，它允许用户直接将文件从本地拖拽到网页中进行上传，而无需点击按钮或浏览文件。这种方式对于上传大量文件或较大的文件非常有用，并且可以提高用户体验。

要实现拖拽文件上传，我们需要使用 HTML5 拖放 API。拖放 API 提供了一系列事件，我们可以通过监听这些事件来实现拖拽文件上传的功能。

首先，我们需要在 HTML 代码中添加一个拖放区域。拖放区域可以是一个 div 元素或任何其他元素，它需要设置属性 ondragover 和 ondrop 来监听拖放事件。

<div id="drop-zone" ondragover="allowDrop(event)" ondrop="drop(event)">
  <p>将文件拖拽到此处上传</p>
</div>

在 ondragover 事件中，我们需要阻止浏览器的默认拖放行为，并设置一个 dropEffect 属性来指定当文件被拖拽到拖放区域时应该发生什么。

function allowDrop(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = "copy";
}

在 ondrop 事件中，我们需要获取被拖拽的文件，然后将其发送到服务器进行上传。

function drop(event) {
  event.preventDefault();
  const files = event.dataTransfer.files;
  uploadFile(files);
}

function uploadFile(files) {
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append("file", files[i]);
  }

  const request = new XMLHttpRequest();
  request.open("POST", "upload.php");
  request.send(formData);
}