如何在Javascript中实现文件上传和下载功能？

发表于2023年8月27日2023年6月10日作者 IT之美

在 JavaScript 中实现文件上传和下载主要靠 XMLHttpRequest 对象。

文件上传:

创建表单,method 设置为 post,enctype 设置为 multipart/form-data:

html
<form id="uploadForm" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

监听表单提交事件,发送 AJAX 请求:

js
document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);
});

后端接收文件数据,保存到服务器。

文件下载:
1)点击下载链接时,发送 AJAX 请求到后端下载路径。

document.querySelector('.download-link').addEventListener('click', function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/file/path');
  xhr.responseType = 'blob';
  xhr.send();
});

2)获取响应内容,转为 Blob 对象或 URL。

js 
xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = xhr.response;
    // 或者生成文件 URL
    var fileURL = URL.createObjectURL(xhr.response);
  }
}

3) 将 Blob 对象生成 URL,设置到 <a> 元素 href 属性,实现点击下载。或者直接使用文件 URL 访问。
4) 后端返回文件内容。

所以,总结来说文件上传下载主要通过 XMLHttpRequest 对象实现:

文件上传:

创建 method 为 post 且 enctype 为 multipart/form-data 的表单。
监听表单提交,发送 AJAX 请求发送表单数据。
后端接收数据,保存文件。

文件下载:

发送 AJAX 请求到下载路径。
获取响应 Blob 对象或生成文件 URL。
设置到 <a> 元素实现下载,或者直接访问文件 URL。
后端返回文件内容。