利用 File、FileList 和 FileReader 对象优化前端文件操作

2023-11-21 10:18:09

在前端开发中，File 对象、FileList 对象和 FileReader 对象是处理文件操作的常见工具。它们为开发人员提供了丰富的 API，可以轻松完成文件上传、下载、读取、预览和进度监控等任务。本文将深入介绍这三个对象，帮助您全面理解和掌握它们的使用方法。

File 对象

File 对象表示一个计算机文件。它包含了有关文件的基本信息，如文件名、文件大小、文件类型和最后修改时间等。File 对象还可以用于读取文件的内容。

File 对象的属性

name ：文件的名称。
size ：文件的大小（以字节为单位）。
type ：文件的 MIME 类型。
lastModified ：文件的最后修改时间。
lastModifiedDate ：文件的最后修改日期。

File 对象的方法

slice() ：从文件中截取一段数据。
stream() ：返回一个可读流，用于读取文件的内容。
text() ：返回文件的文本内容。
arrayBuffer() ：返回文件的 ArrayBuffer 对象。
blob() ：返回文件的 Blob 对象。

FileList 对象

FileList 对象表示一个文件列表。它通常是由元素生成。FileList 对象包含了 File 对象的列表，可以轻松遍历文件列表并获取每个文件的相关信息。

FileList 对象的属性

length ：FileList 对象中文件的数量。
item() ：返回指定索引处的 File 对象。

FileList 对象的方法

forEach() ：对 FileList 对象中的每个 File 对象执行指定的函数。

FileReader 对象

FileReader 对象用于读取文件的内容。它可以读取文本文件、二进制文件和图像文件等多种类型文件。FileReader 对象提供了多种方法来读取文件的内容，包括：

readAsText() ：将文件的内容读取为文本。
readAsDataURL() ：将文件的内容读取为 data URL。
readAsArrayBuffer() ：将文件的内容读取为 ArrayBuffer 对象。
readAsBinaryString() ：将文件的内容读取为二进制字符串。

FileReader 对象的属性

readyState ：FileReader 对象的当前状态。
result ：读取文件的内容。

FileReader 对象的方法

abort() ：中止正在进行的读取操作。
readAsText() ：将文件的内容读取为文本。
readAsDataURL() ：将文件的内容读取为 data URL。
readAsArrayBuffer() ：将文件的内容读取为 ArrayBuffer 对象。
readAsBinaryString() ：将文件的内容读取为二进制字符串。

如何使用 File、FileList 和 FileReader 对象

以下是一个简单的示例，演示如何使用 File、FileList 和 FileReader 对象来上传文件：

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

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

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

    if (files.length > 0) {
      const file = files[0];

      const reader = new FileReader();

      reader.onload = () => {
        // File contents
        const fileContents = reader.result;

        // Send file contents to server
      };

      reader.readAsText(file);
    }
  });
</script>