FileReader JS: 详解用途及案例演示

FileReader 是一个 HTML5 API，用于读取用户计算机上的文件内容。它可以读取文本、二进制数据、URL 等类型的文件。

使用 FileReader，可以实现以下功能：

上传图片预览：在用户选择图片后，通过 FileReader 读取图片文件，并将读取的内容展示在页面上，以供用户预览。
读取本地文件：通过 FileReader 读取用户本地保存的文件，将文件内容展示在页面上或者进行其他操作。
文件上传：可以将读取的文件内容进行上传到服务器。

以下是一个读取本地文件的案例：

HTML 代码：

<input type='file' id='fileInput'>
<div id='fileContent'></div>

JavaScript 代码：

var fileInput = document.getElementById('fileInput');
var fileContent = document.getElementById('fileContent');

fileInput.addEventListener('change', function() {
  var file = fileInput.files[0];
  var reader = new FileReader();
  reader.readAsText(file);
  
  reader.onload = function(event) {
    fileContent.innerHTML = event.target.result;
  };
});

上述代码中，首先获取了 HTML 中的文件输入框和展示内容的元素，并监听了文件输入框的 change 事件。当用户选择文件后，通过 FileReader 读取文件内容，并将读取的内容展示在页面上。在这个案例中，我们使用了 FileReader 的 readAsText 方法，将文件读取为文本类型。在 onload 事件中，获取读取的内容并将其显示在页面上。

总之，FileReader 是一个十分有用的 API，它可以为我们提供许多文件读取和处理的功能，方便开发者进行文件操作。