突破传统限制，玩转 File API 探索 JS 新天地

2024-01-23 02:41:32

重拾 JavaScript：掌握文件 API

引言

文件 API 是 JavaScript 的一个强大工具集，使我们能够轻松地读取、写入、上传和下载文件。它为与文件交互提供了广泛的可能性，从基本文本处理到复杂的媒体操作。让我们深入探索文件 API 的功能，并了解如何使用它来扩展您的 Web 应用程序。

读取文件

读取文件是最常见的 File API 操作之一。我们可以使用 FileReader 对象将文件内容转换为文本或二进制数据。这使我们能够处理多种文件格式，例如文本、图像和音频。以下代码片段演示了如何读取文本文件：

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();

reader.onload = function() {
  const text = reader.result;
  // Do something with the text
};

reader.readAsText(file);

写入文件

文件 API 不仅限于读取文件，它还允许我们创建和写入文件。通过使用 Blob 对象，我们可以轻松地生成文件内容，并通过链接标签将其下载到本地计算机。以下代码段演示了如何创建并下载一个简单的文本文件：

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'hello-world.txt';
a.click();

文件上传

文件上传是 Web 应用程序中常见的功能。文件 API 使我们能够轻松地将文件从客户端上传到服务器。通过使用 FormData 对象，我们可以创建包含文件数据的表单数据。然后，我们可以使用 fetch() API 将数据发送到服务器：

const form = document.getElementById('form');

form.addEventListener('submit', function(e) {
  e.preventDefault();

  const file = document.getElementById('file-input').files[0];
  const formData = new FormData();

  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(function(response) {
    // Do something with the response
  });
});

文件下载

文件下载是文件 API 的另一项核心功能。我们可以使用 fetch() API 从服务器请求文件，然后使用 Blob 对象将响应转换为可下载的文件。以下代码片段演示了如何从 URL 下载文件：

const url = '/download';

fetch(url).then(function(response) {
  response.blob().then(function(blob) {
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
  });
});