JS+HTML5 FileReader对象用法示例

以下是JS+HTML5 FileReader对象用法示例的完整攻略：

简介

JavaScript通过FileReader对象可以实现文件读取操作，这个功能可以很好地满足一些特殊业务需求，例如上传文件时，需要对文件做一些特殊处理或者读取文件中某些数据进行操作等。

FileReader API

FileReader API主要包括以下四个方法：

1. readAsBinaryString(Blob|File)：以二进制方式读取文件内容，读取结果会存放在result属性中；
2. readAsText(Blob|File, String)：以文本形式读取文件内容，读取结果会存放在result属性中；
3. readAsDataURL(Blob|File)：以Base64格式读取文件内容，读取结果会存放在result属性中；
4. abort()：终止读取操作。

在文件读取时，需要监听load和error事件，load事件表示文件读取成功，error事件表示文件读取失败。

示例1

以下示例，实现了通过文件选择框，读取本地的图片文件，并展示在网页上：

<input type="file" id="file-input">
<div id="img-wrapper"></div>

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

fileInput.onchange = function () {
  const file = fileInput.files[0];
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file);

  fileReader.onload = function () {
    const img = document.createElement('img');
    img.src = fileReader.result;
    imgWrapper.appendChild(img);
  };
};
</script>

在这个例子中，首先获取到了文件选择框（<input type="file">元素），当选择了文件后，触发了onchange事件，事件中实例化了FileReader对象，并以Base64的形式读取了文件内容，读取成功后，将读取结果赋值给img元素的src属性，使其展示在网页上。

示例2

以下示例，实现了通过文本输入框，读取本地的文本文件，并展示结果：

<input type="file" id="file-input">
<textarea id="text-result" style="width: 400px; height: 200px;"></textarea>

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

fileInput.onchange = function () {
  const file = fileInput.files[0];
  const fileReader = new FileReader();
  fileReader.readAsText(file, 'utf-8');

  fileReader.onload = function () {
    textResult.value = fileReader.result;
  };
};
</script>

与上一个例子类似，这个例子中首先获取到了文件选择框，当选择了文件后，触发了onchange事件，事件中实例化了FileReader对象，以UTF-8的形式读取了文件内容，读取成功后，将读取结果赋值给textarea元素的value属性，使其展示在网页上。

结语

以上是JS+HTML5 FileReader对象用法示例的攻略，通过这些示例，你可以了解到如何使用FileReader对象，实现对本地文件的读取和处理。