JS FileReader读取文件|极客笔记

JS FileReader读取文件

1. 简介

在Web开发中，我们经常需要在浏览器中读取用户上传的文件。通过使用FileReader对象，我们可以在JavaScript中实现对文件的读取操作。FileReader是HTML5提供的一个内置对象，用于异步读取文件中的内容。

本文将详细介绍FileReader对象的使用方法，包括如何读取文件、监听读取事件、处理读取结果等。

2. FileReader对象的属性和方法

在开始使用FileReader之前，我们先来了解一下它的属性和方法。

2.1 属性

FileReader.error：表示读取过程中出现的错误，如果没有错误则为null。
FileReader.readyState：表示FileReader的读取状态，有以下几种可能的值：
- EMPTY：表示对象已创建但还没有加载文件。
- LOADING：表示文件正在被加载。
- DONE：表示文件已经加载完成。
FileReader.result：表示读取的文件内容。根据读取的方式不同，result的类型也不同：
- 以文本形式读取文件时，result是一个字符串。
- 以DataURL形式读取文件时，result是一个Base64编码的字符串，可用于在标签中显示图片。

2.2 方法

FileReader.readAsText()：按照文本方式读取文件中的内容。
FileReader.readAsDataURL()：将文件转换为DataURL形式。
FileReader.abort()：中止读取操作。

3. 使用FileReader读取文件

3.1 读取文本文件

下面我们通过一个示例代码来演示如何使用FileReader读取文本文件：

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

<script>
  const input = document.getElementById('txtFile');

  input.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();

      reader.addEventListener('load', function(e) {
        const content = e.target.result;
        console.log(content);
      });

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

在上面的代码中，我们通过<input type="file">元素创建了一个文件选择框，用户可以通过该框选择要读取的文本文件。接着，我们通过change事件监听器捕获用户选择文件的事件，获取选中的文件对象。

然后，我们创建了一个FileReader对象，并通过readAsText()方法按照文本方式读取文件内容。在load事件的回调函数中，我们可以访问result属性来获取文件的内容。这里我们简单地将内容打印到控制台，你也可以根据自己的需求进行进一步处理。

当用户选择文件后，代码将输出文件的内容。你可以将测试用的文本文件复制到项目目录，并进行测试。输出应该是文件中的文本内容。

3.2 读取图片文件并显示

除了读取文本文件之外，FileReader还可以读取图片文件，并将其转换为DataURL形式。下面我们通过示例代码来演示如何读取图片文件并在页面上显示：

<input type="file" id="imageFile" />
<div id="showImage"></div>

<script>
  const input = document.getElementById('imageFile');
  const showImage = document.getElementById('showImage');

  input.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();

      reader.addEventListener('load', function(e) {
        const image = document.createElement('img');
        image.src = e.target.result;

        showImage.appendChild(image);
      });

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

在上面的代码中，我们通过<input type="file">元素创建了一个文件选择框，用户可以通过该框选择要读取的图片文件。然后，我们创建了一个FileReader对象，并通过readAsDataURL()方法将文件转换为DataURL形式。

在load事件的回调函数中，我们创建了一个<img>元素，将DataURL赋值给它的src属性。最后，我们将这个<img>元素添加到页面上的<div>元素中，以显示图片。

当用户选择图片文件后，代码将在页面上显示该图片。你可以将测试用的图片文件复制到项目目录，并进行测试。