玩转文件上传：拖拽、进度条、取消上传，原来如此！

前端

2023-11-11 21:23:00

序言

上传功能是Web应用程序中不可或缺的一部分，无论您是构建简单的个人博客还是复杂的企业级系统，都需要处理文件上传的需求。而拖拽上传、上传进度条和取消上传功能，更是提升用户体验的利器。

本文将全面解析这几个功能的实现原理，从前端到后端，手把手教你实现文件上传的炫酷效果。保证您看完之后，能够轻松应对各种上传需求。

实现拖拽上传

拖拽上传，顾名思义，就是允许用户直接将文件从电脑上拖拽到浏览器窗口中，即可完成文件上传。

实现拖拽上传需要用到HTML5的Drag and Drop API。具体步骤如下：

在需要上传文件的元素上添加drop事件监听器。
在drop事件处理函数中，使用e.dataTransfer.files获取用户拖拽的文件列表。
遍历文件列表，并使用FormData对象将文件添加到表单数据中。
使用XMLHttpRequest对象发送表单数据到服务器。

代码示例：

<div id="drop-area">
  <p>拖拽文件到此处以上传</p>
</div>

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

  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();

    const files = e.dataTransfer.files;

    const formData = new FormData();

    for (const file of files) {
      formData.append('file', file);
    }

    const xhr = new XMLHttpRequest();

    xhr.open('POST', '/upload');

    xhr.send(formData);
  });
</script>

实现上传进度条

上传进度条可以实时显示文件上传的进度，让用户随时了解上传状态。

实现上传进度条需要用到HTML5的XMLHttpRequest对象的onprogress事件。具体步骤如下：

在发送表单数据到服务器之前，为XMLHttpRequest对象添加onprogress事件监听器。
在onprogress事件处理函数中，使用e.loaded和e.total获取已上传字节数和总字节数，并计算出上传进度。
将上传进度更新到进度条上。

代码示例：

const xhr = new XMLHttpRequest();

xhr.open('POST', '/upload');

xhr.onprogress = (e) => {
  const progress = (e.loaded / e.total) * 100;

  // 更新进度条
  progressBar.value = progress;
};

xhr.send(formData);

实现取消上传

取消上传功能允许用户在文件上传过程中随时取消上传。

实现取消上传需要用到HTML5的XMLHttpRequest对象的abort()方法。具体步骤如下：

在页面上添加一个取消按钮。
在取消按钮的点击事件处理函数中，使用xhr.abort()方法取消文件上传。

代码示例：

<button id="cancel-button">取消上传</button>

<script>
  const cancelButton = document.getElementById('cancel-button');

  cancelButton.addEventListener('click', () => {
    xhr.abort();
  });
</script>