用 FileReader 对象读取本地文件

2023-10-04 15:51:40

了解如何使用 FileReader 对象在 JavaScript 应用程序中从本地计算机异步读取文件。

简介

FileReader 对象是 Web API 中的内置对象，可用于读取用户计算机上存储的文件。它使用异步操作，这意味着它不会阻塞主线程，因此应用程序可以在后台读取文件而不会影响用户的交互。

使用 FileReader 对象

要使用 FileReader 对象，首先需要创建一个新的 FileReader 对象。然后，您可以使用 readAsArrayBuffer(), readAsBinaryString(), readAsDataURL(), readAsText() 等方法之一来读取文件。这些方法接受一个 File 对象作为参数，该对象表示要读取的文件。

文件读取完成后，onload 事件将在 FileReader 对象上触发。您可以使用 result 属性来访问文件的内容。例如，要读取文件作为文本，可以使用以下代码：

const fileReader = new FileReader();

fileReader.onload = () => {
  const text = fileReader.result;
};

fileReader.readAsText(file);

示例

以下是一个示例，演示如何使用 FileReader 对象从本地计算机中读取文件：

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

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

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

    const fileReader = new FileReader();

    fileReader.onload = () => {
      console.log(fileReader.result);
    };

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