JavaScript基础之文件上传与下载的实现详解

一、文件上传

文件上传是我们经常会用到的功能，本节中将讲解使用JavaScript实现文件上传的方法。

1. HTML代码

首先，我们需要编写一个HTML的表单，用于选择文件和提交上传请求。

<form id="upload-form">
  <input type="file" name="file-input">
  <button type="submit">上传文件</button>
</form>

2. JavaScript代码

接着，我们需要编写Javascript代码，用于处理上传请求，并将文件发送到服务器。

const form = document.getElementById('upload-form');
const fileInput = document.querySelector('input[type="file"]');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // 防止表单自动提交
  const formData = new FormData();
  formData.append('file', fileInput.files[0]); // 将文件对象添加到FormData中
  fetch('/upload', { // 发送上传请求到服务器的/upload路由
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      console.log('文件上传成功');
    } else {
      console.error('文件上传失败');
    }
  })
  .catch(error => {
    console.error('文件上传失败：', error);
  })
})

以上Javascript代码使用了Fetch API，它是一种现代的网络请求API，可以用于发送各种类型的请求。在请求中，我们使用了FormData对象，它是用于包装表单数据并将其发送到服务器的API。我们将选择的文件对象添加到FormData中，然后使用fetch发送上传请求。

3. 示例

下面是一个示例网站，可以上传一个图片文件并且显示上传的图片。你可以参考该示例，并魔改它，实现并尝试文件上传功能。

文件上传示例

二、文件下载

文件下载指的是将服务器上的文件发送给客户端，让客户端下载该文件。

1. HTML代码

在HTML代码中，我们需要设置一个链接，用于下载文件。

<a href="/download" download="example.pdf">下载PDF文件</a>

注意：在链接中必须设置download属性，用于指定下载文件的名称。

2. JavaScript代码

接着，我们需要编写Javascript代码，用于处理下载请求。

const downloadLink = document.querySelector('a[href="/download"]');

downloadLink.addEventListener('click', (event) => {
  event.preventDefault(); // 防止链接默认行为
  fetch('/download', { // 发送下载请求到服务器的/download路由
    method: 'GET',
  })
  .then(response => {
    if (response.ok) {
      return response.blob(); // 将响应数据转化为Blob对象
    } else {
      console.error('文件下载失败');
    }
  })
  .then(blob => {
    const url = URL.createObjectURL(blob); // 将Blob对象生成URL
    const a = document.createElement('a'); // 创建一个<a>标签
    a.href = url;
    a.download = 'example.pdf'; // 设置下载文件的名字
    a.click(); // 模拟<a>标签的click事件
  })
  .catch(error => {
    console.error('文件下载失败：', error);
  })
})

以上Javascript代码使用了Fetch API，我们先发送一个GET请求到/download路由，并将响应数据转化为Blob对象。接着生成Blob对象的URL，并使用createElement方法创建一个<a>标签，设置它的href属性和download属性，然后调用click方法模拟用户点击该链接。

3. 示例

下面是一个示例网站，可以下载一个PDF文件。你可以参考该示例，并魔改它，实现并尝试文件下载功能。

文件下载示例