FileReader js 有什么用 详细说明 列举案例

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

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

1. 上传图片预览：在用户选择图片后，通过FileReader读取图片文件，并将读取的内容展示在页面上，以供用户预览。

2. 读取本地文件：通过FileReader读取用户本地保存的文件，将文件内容展示在页面上或者进行其他操作。

3. 文件上传：可以将读取的文件内容进行上传到服务器。

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

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，它可以为我们提供许多文件读取和处理的功能，方便开发者进行文件操作。