造轮子实践：回顾基础操作中的文件上传功能

前端

2024-01-27 01:26:55

前言

随着互联网的飞速发展，文件上传功能已经成为一种非常常见的需求。无论是在个人博客、企业网站还是大型电商平台，我们都可以看到文件上传的身影。文件上传功能可以帮助用户将文件从本地计算机上传到服务器上，从而实现文件的存储、共享和下载。

如何选择合适的上传方式

在实现文件上传功能之前，我们需要先选择合适的上传方式。目前，常用的文件上传方式主要有以下几种：

Form 表单上传： 这种方式是最简单也是最传统的上传方式。我们可以使用 HTML 的 <input type="file"> 元素来创建文件上传控件，然后使用 JavaScript 来监听文件上传事件。当用户选择要上传的文件后，我们可以通过 FileReader API 来读取文件的内容，然后将其发送到服务器上。
Ajax 上传： 这种方式比 Form 表单上传更加灵活，我们可以使用 JavaScript 来直接将文件发送到服务器上，而不需要使用 HTML 表单。Ajax 上传通常使用 XMLHttpRequest 对象来实现，我们可以通过 XMLHttpRequest 对象来发送文件数据和请求头，然后通过 XMLHttpRequest 对象的 onreadystatechange 事件来监听服务器的响应。
WebSocket 上传： 这种方式是最近几年才兴起的一种新的上传方式。WebSocket 上传使用 WebSocket 协议来建立一个双向通信通道，然后我们可以通过 WebSocket 通道来将文件数据发送到服务器上。WebSocket 上传的优点是速度快、延迟低，而且可以实现实时传输。

如何使用 JavaScript 和 HTML5 API 来实现文件上传

在选择好合适的上传方式后，我们可以使用 JavaScript 和 HTML5 API 来实现文件上传功能。以下是一个简单的示例，演示了如何使用 JavaScript 和 HTML5 API 来实现文件上传：

// 创建一个文件上传控件
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.multiple = true;

// 监听文件上传事件
fileInput.addEventListener('change', (e) => {
  // 获取选中的文件
  const files = e.target.files;

  // 遍历选中的文件
  for (const file of files) {
    // 使用 FileReader API 来读取文件的内容
    const reader = new FileReader();
    reader.onload = (e) => {
      // 获取文件的内容
      const fileContent = e.target.result;

      // 将文件的内容发送到服务器上
      const formData = new FormData();
      formData.append('file', fileContent, file.name);
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload', true);
      xhr.send(formData);
    };
    reader.readAsArrayBuffer(file);
  }
});

// 将文件上传控件添加到页面上
document.body.appendChild(fileInput);