File API，玩转文件操作的艺术

2023-11-27 12:57:07

在当今网络应用中，文件操作无处不在，从上传头像到下载文档，再到图像处理和视频编辑。File API 作为 JavaScript 标准的一部分，为我们提供了强大而灵活的工具，让我们能够轻松高效地处理文件。

File 对象

File 对象是 File API 的核心，它代表了计算机中的一个文件。我们可以通过 <input> 标签的 file 属性来获取 File 对象，例如：

<input type="file" id="file-input">

通过 document.getElementById('file-input').files，我们可以得到一个 FileList 对象，其中包含了所有选中的 File 对象。

构造函数

File 对象有以下构造函数：

new File([fileContents], fileName, [options])

其中：

fileContents: 文件内容，可以是 Blob、ArrayBuffer 或 ArrayBufferView。
fileName: 文件名称（可选）。
options: 一些可选参数，例如 type（文件类型）和 lastModified（最后修改时间）。

实例属性和实例方法

File 对象提供了一些有用的实例属性和实例方法：

属性

name: 文件名称
size: 文件大小（以字节为单位）
type: 文件类型（MIME 类型）
lastModified: 最后修改时间（以毫秒为单位）

方法

slice(start, end, contentType)：从文件中截取一个片段，并返回一个新的 Blob 对象。
stream(): 创建一个可读流，用于读取文件内容。
text(): 读取文件内容并返回一个 Promise，该 Promise 解析为文件的文本内容。
arrayBuffer(): 读取文件内容并返回一个 Promise，该 Promise 解析为文件的 ArrayBuffer。

FileList 对象

FileList 对象是一个类似于数组的对象，它包含了所有选中的 File 对象。我们可以通过 FileList 对象中的方法来遍历和处理文件，例如：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const files = e.target.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    // 处理每个文件
  }
});

FileReader 对象

FileReader 对象用于读取文件的异步操作。它提供了以下方法：

readAsText(file)：将文件内容作为文本读取。
readAsDataURL(file)：将文件内容作为数据 URL 读取。
readAsArrayBuffer(file)：将文件内容作为 ArrayBuffer 读取。

当读取操作完成后，FileReader 对象会触发 load 事件，我们可以在该事件处理函数中获取读取结果。例如：

const reader = new FileReader();

reader.onload = (e) => {
  const result = e.target.result;

  // 处理读取结果
};

reader.readAsText(file);

综合实例

下面是一个综合的实例，演示了如何使用 File API 上传一个文件：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];

  const formData = new FormData();
  formData.append('file', file);

  const request = new XMLHttpRequest();
  request.open('POST', '/upload');
  request.send(formData);
});