前端开发必备：文件下载和上传方法封装攻略

2023-04-22 16:50:01

文件下载和上传在 JavaScript 中的封装

简介

在现代 Web 开发中，文件下载和上传是至关重要的功能。JavaScript 提供了强大的工具来封装这些操作，让开发人员可以轻松地实现这些功能。在这篇博文中，我们将深入探讨 JavaScript 中文件下载和上传的封装方法，包括代码示例和实际应用。

文件下载封装

原生 XHR 方法

原生 XHR（XMLHttpRequest）方法是下载文件的简单而有效的途径。它利用 XMLHttpRequest 对象发送 HTTP GET 请求并接收二进制响应。通过将 responseType 属性设置为 blob，我们可以直接获取文件内容。以下代码示例演示了原生 XHR 文件下载：

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (this.status === 200) {
      const blob = this.response;
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
    }
  };
  xhr.send();
}

Ajax 方法

jQuery 库中的 Ajax 方法提供了文件下载的更高级功能。它允许我们发送异步 HTTP 请求，并通过 done() 和 fail() 回调函数处理响应。以下代码示例演示了使用 Ajax 下载文件的另一种方法：

$.ajax({
  url: url,
  method: 'GET',
  xhrFields: {
    responseType: 'blob'
  },
  success: function(data, textStatus, xhr) {
    const blob = data;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
  },
  error: function(xhr, textStatus, errorThrown) {
    console.log('文件下载失败');
  }
});

文件上传封装

原生 FormData 对象

HTML5 中的 FormData 对象提供了一个简单的机制来创建文件上传表单数据。通过将文件添加到 FormData 对象中，我们可以轻松地将文件发送到服务器。以下代码示例演示了使用原生 FormData 对象进行文件上传：

function uploadFile(url, file) {
  const formData = new FormData();
  formData.append('file', file);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onload = function() {
    if (this.status === 200) {
      console.log('文件上传成功');
    }
  };
  xhr.send(formData);
}

Ajax 方法

同样，Ajax 方法也可以用于文件上传。它允许我们发送异步文件上传请求，并使用进度事件监视上传过程。以下代码示例演示了使用 Ajax 进行文件上传：

$.ajax({
  url: url,
  method: 'POST',
  data: formData,
  cache: false,
  contentType: false,
  processData: false,
  xhr: function() {
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
      const progress = Math.round((e.loaded / e.total) * 100);
      console.log('文件上传进度：' + progress + '%');
    });
    return xhr;
  },
  success: function(data, textStatus, xhr) {
    console.log('文件上传成功');
  },
  error: function(xhr, textStatus, errorThrown) {
    console.log('文件上传失败');
  }
});