用JS FileReader读取文件

前端

2023-10-11 02:09:30

FileReader简介

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件，而无需将整个文件加载到内存中。这对于处理大型文件非常有用，因为可以避免内存溢出。FileReader还支持多种文件类型，包括文本文件、图像文件和视频文件。

FileReader的使用方法

要使用FileReader对象读取文件，需要执行以下步骤：

创建一个FileReader对象。
使用FileReader对象的readAsText()或readAsArrayBuffer()方法来读取文件。
在FileReader对象的onload事件处理程序中处理文件读取结果。

FileReader对象的onload事件处理程序将在文件读取完成后触发。在事件处理程序中，可以访问FileReader对象的result属性来获取文件读取结果。

FileReader读取文本文件

要使用FileReader对象读取文本文件，可以使用以下代码：

var file = new File(["Hello, world!"], "hello.txt", {
  type: "text/plain",
});
var reader = new FileReader();
reader.onload = function() {
  console.log(reader.result);
};
reader.readAsText(file);

FileReader读取二进制文件

要使用FileReader对象读取二进制文件，可以使用以下代码：

var file = new File([new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x21])], "hello.bin", {
  type: "application/octet-stream",
});
var reader = new FileReader();
reader.onload = function() {
  console.log(reader.result);
};
reader.readAsArrayBuffer(file);

FileReader读取图片文件

要使用FileReader对象读取图片文件，可以使用以下代码：

var file = new File(["Hello, world!"], "hello.png", {
  type: "image/png",
});
var reader = new FileReader();
reader.onload = function() {
  var img = new Image();
  img.onload = function() {
    document.body.appendChild(img);
  };
  img.src = reader.result;
};
reader.readAsDataURL(file);

FileReader读取视频文件

要使用FileReader对象读取视频文件，可以使用以下代码：

var file = new File(["Hello, world!"], "hello.mp4", {
  type: "video/mp4",
});
var reader = new FileReader();
reader.onload = function() {
  var video = document.createElement("video");
  video.src = reader.result;
  video.controls = true;
  document.body.appendChild(video);
};
reader.readAsDataURL(file);