js利用FileReader读取本地文件或者blob方式

接下来我将详细讲解使用JavaScript中的FileReader对象来读取本地文件或Blob对象的方法。

FileReader对象简介

FileReader对象是WebAPI中的一个对象，用于读取本地文件中的数据。它提供了一种异步方式来读取文件，并且支持大量的文件类型。我们可以使用FileReader对象将文件读取为文本、DataURL或ArrayBuffer等多种格式。

FileReader对象的常用方法和属性：

• readAsText()：读取文件并将文件内容解释为文本。该方法接受一个File对象或Blob对象作为参数。
• readAsDataURL()：读取文件并将文件内容转换为DataURL格式（Base64编码的字符串）。该方法接受一个File对象或Blob对象作为参数。
• readAsArrayBuffer()：读取文件并将文件内容解释为ArrayBuffer类型的对象。该方法接受一个File对象或Blob对象作为参数。
• result：表示文件读取操作成功后，返回的结果。可以通过该属性获取文件的内容。

使用FileReader对象读取本地文件

以下是使用FileReader对象读取本地文件并以Base64格式显示文件内容的示例：

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

<script>
var fileInput = document.getElementById("file-input");
var fileContent = document.getElementById("file-content");

fileInput.addEventListener("change", function() {
  var fileReader = new FileReader();
  var file = fileInput.files[0];

  fileReader.onload = function(event) {
    fileContent.textContent = event.target.result;
  };

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

这段代码会生成一个文件选择输入框和一个空的<pre>标签。当用户选择本地文件后，FileReader对象将打开选择的文件，并将文件读取并转换为DataURL格式，最后将文件内容显示在上面的<pre>标签中。

使用FileReader对象读取Blob对象

除了读取本地文件，FileReader对象还可以读取Blob对象中的数据。以下是使用FileReader对象读取Blob对象并以文本格式显示Blob数据的示例：

var blob = new Blob(["hello world!"]);

var reader = new FileReader();

reader.onload = function(event) {
  console.log(event.target.result);
};

reader.readAsText(blob);

在这个示例中，我们使用Blob构造函数创建一个包含字符串“hello world!”的Blob对象。然后使用FileReader对象将Blob读取为文本，并在控制台中打印出读取结果。

以上就是使用FileReader对象读取本地文件和Blob对象数据的方法和示例。希望能够帮助你。