拖放文件上传反应 - JavaScript

拖放文件上传使用户可以直接将他们的文件拖放到指定区域上传，使上传体验更加友好。在这篇文章中，我们将介绍如何使用JavaScript实现拖放文件上传反应。

实现基本步骤

1. 使用 HTML 和 CSS 创建一个可以触发文件上传的区域。

<div id="file-drop">
  <p>将文件拖放到此区域上传</p>
</div>

<style>
  #file-drop {
    width: 400px;
    height: 200px;
    border: 1px dashed gray;
    text-align: center;
    padding-top: 80px;
  }
</style>

2. 创建 JavaScript 代码实现文件拖放和上传的逻辑。

const fileDrop = document.getElementById('file-drop');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  fileDrop.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

fileDrop.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  handleFiles(files);
}

function handleFiles(files) {
  [...files].forEach(uploadFile);
}

function uploadFile(file) {
  const url = 'https://example.com/upload';
  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  xhr.open('POST', url, true);
  xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('文件已上传');
    }
  });

  formData.append('file', file);

  xhr.send(formData);
}

解释实现步骤

1. 首先，我们使用 HTML 和 CSS 创建了一个具有拖放上传功能的区域。在这个示例中，我们创建了一个 div 容器，容器名为 file-drop，并添加了样式以指定容器的外观和排版。您可以根据您的项目需求自由进行修改。

在 JavaScript 代码中，我们使用preventDefaults函数来防止浏览器默认行为。在这个例子中主要是阻止文件在浏览器中打开并预览，保证上传的纯文本。

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  fileDrop.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

3. 我们使用 handleDrop() 函数在用户将文件放到拖放区域中时调用。在该函数中，我们从事件传参中获得传入的文件并调用 handleFiles() 函数，该函数用于处理上传文件。

fileDrop.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  handleFiles(files);
}

4. 当用户将文件放入拖放区域时，我们将使用 handleFiles() 函数处理上传的文件。通过迭代文件列表并逐一上传，我们调用 uploadFile() 函数。

function handleFiles(files) {
  [...files].forEach(uploadFile);
}

5. 每次上传文件时，uploadFile() 函数都会被调用， 该函数将被用于创建一个 XMLHttpRequest 对象，并将文件通过 FormData 对象进行封装，然后将其发送到服务器。

function uploadFile(file) {
  const url = 'https://example.com/upload';
  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  xhr.open('POST', url, true);
  xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('文件已上传');
    }
  });

  formData.append('file', file);

  xhr.send(formData);
}

总结

在本文中，我们介绍了如何使用JavaScript实现拖放文件上传反应。使用上述方法，用户将能够获得更友好的上传体验。可以自由调整代码来满足特定需求。