首页 > 其他分享 >重学前端 File、Blob、FileReader 基础知识学习

重学前端 File、Blob、FileReader 基础知识学习

时间：2024-11-02 13:49:53浏览次数：3  
标签：文件 const 读取 对象 FileReader Blob File

前言

JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的，它们之间又有何区别和联系！

fileOf7174.png

 

1. Blob

Blob 全称为 binary large object ，即二进制大对象，它是 JavaScript 中的一个对象，表示原始的类似文件的数据。下面是 MDN 中对 Blob 的解释：

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

实际上，Blob 对象是包含有只读原始数据的类文件对象。简单来说，Blob 对象就是一个不可修改的二进制文件。

（1）Blob 创建

可以使用 Blob() 构造函数来创建一个 Blob：

new Blob(array, options);

其有两个参数：

  • array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；

  • options：可选的 BlobPropertyBag 字典，它可能会指定如下两个属性

  • type：默认值为 ""，表示将会被放入到 blob 中的数组内容的 MIME 类型。

  • endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

常见的 MIME 类型如下：

fileOf7174.png

 

下面来看一个简单的例子：

const blob = new Blob(["Hello World"], {type: "text/plain"});

这里可以成为动态文件创建，其正在创建一个类似文件的对象。这个 blob 对象上有两个属性：

  • size：Blob对象中所包含数据的大小（字节）；

  • type：字符串，认为该Blob对象所包含的 MIME 类型。如果类型未知，则为空字符串。

下面来看打印结果：

const blob = new Blob(["Hello World"], {type: "text/plain"});

console.log(blob.size); // 11
console.log(blob.type); // "text/plain"

注意，字符串"Hello World"是 UTF-8 编码的，因此它的每个字符占用 1 个字节。

到现在，Blob 对象看起来似乎我们还是没有啥用。那该如何使用 Blob 对象呢？可以使用 URL.createObjectURL() 方法将将其转化为一个 URL，并在 Iframe 中加载：

<iframe></iframe>

const iframe = document.getElementsByTagName("iframe")[0];

const blob = new Blob(["Hello World"], {type: "text/plain"});

iframe.src = URL.createObjectURL(blob);

（2）Blob 分片

除了使用Blob()构造函数来创建blob 对象之外，还可以从 blob 对象中创建blob，也就是将 blob 对象切片。Blob 对象内置了 slice() 方法用来将 blob 对象分片，其语法如下：

const blob = instanceOfBlob.slice([start [, end [, contentType]]]};

其有三个参数：

  • start：设置切片的起点，即切片开始位置。默认值为 0，这意味着切片应该从第一个字节开始；

  • end：设置切片的结束点，会对该位置之前的数据进行切片。默认值为blob.size；

  • contentType：设置新 blob 的 MIME 类型。如果省略 type，则默认为 blob 的原始值。

下面来看例子：

const iframe = document.getElementsByTagName("iframe")[0];

const blob = new Blob(["Hello World"], {type: "text/plain"});

const subBlob = blob.slice(0, 5);

iframe.src = URL.createObjectURL(subBlob);

此时页面会显示"Hello"。

2. File

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。实际上，File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。Blob 的属性和方法都可以用于 File 对象。

注意：File 对象中只存在于浏览器环境中，在 Node.js 环境中不存在。

在 JavaScript 中，主要有两种方法来获取 File 对象：

  • <input> 元素上选择文件后返回的 FileList 对象；

  • 文件拖放操作生成的 DataTransfer 对象；

（1）input

首先定义一个输入类型为 file 的 input 标签：

<input type="file" id="fileInput" multiple="multiple">

这里给 input 标签添加了三个属性：

  • type="file"：指定 input 的输入类型为文件；

  • id="fileInput"：指定 input 的唯一 id；

  • multiple="multiple"：指定 input 可以同时上传多个文件；

下面来给 input 标签添加 onchange 事件，当选择文件并上传之后触发：

const fileInput = document.getElementById("fileInput");

fileInput.onchange = (e) => {
    console.log(e.target.files);
}

当点击上传文件时，控制台就会输出一个 FileList 数组，这个数组的每个元素都是一个 File 对象，一个上传的文件就对应一个 File 对象：

fileOf7174.png

 

每个 File 对象都包含文件的一些属性，这些属性都继承自 Blob 对象：

  • lastModified：引用文件最后修改日期，为自1970年1月1日0:00以来的毫秒数；

  • lastModifiedDate：引用文件的最后修改日期；

  • name：引用文件的文件名；

  • size：引用文件的文件大小；

  • type：文件的媒体类型（MIME）；

  • webkitRelativePath：文件的路径或 URL。

通常，我们在上传文件时，可以通过对比 size 属性来限制文件大小，通过对比 type 来限制上传文件的格式等。

（2）文件拖放

另一种获取 File 对象的方式就是拖放 API，这个 API 很简单，就是将浏览器之外的文件拖到浏览器窗口中，并将它放在一个成为拖放区域的特殊区域中。拖放区域用于响应放置操作并从放置的项目中提取信息。这些是通过 ondrop 和 ondragover 两个 API 实现的。

下面来看一个简单的例子，首先定义一个拖放区域：

<div id="drop-zone"></div>

然后给这个元素添加 ondragover 和 ondrop 事件处理程序：

const dropZone = document.getElementById("drop-zone");

dropZone.ondragover = (e) => {
    e.preventDefault();
}

dropZone.ondrop = (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    console.log(files)
}

注意：这里给两个 API 都添加了 e.preventDefault()，用来阻止默认事件。它是非常重要的，可以用来阻止浏览器的一些默认行为，比如放置文件将显示在浏览器窗口中。

当拖放文件到拖放区域时，控制台就会输出一个  FileList 数组，该数组的每一个元素都是一个 File 对象。这个 FileList 数组是从事件参数的 dataTransfer 属性的 files 获取的：

fileOf7174.png

 

可以看到，这里得到的 File 对象和通过 input 标签获得的 File 对象是完全一样的。

3. FileReader

FileReader 是一个异步 API，用于读取文件并提取其内容以供进一步使用。FileReader 可以将 Blob 读取为不同的格式。

注意：FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容，不能用于从文件系统中按路径名简单地读取文件。

（1）基本使用

可以使用 FileReader 构造函数来创建一个 FileReader 对象：

const reader = new FileReader();

这个对象常用属性如下：

  • error：表示在读取文件时发生的错误；

  • result：文件内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

  • readyState：表示FileReader状态的数字。取值如下：

fileOf7174.png

 

FileReader 对象提供了以下方法来加载文件：

  • readAsArrayBuffer()：读取指定 Blob 中的内容，完成之后，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；

  • FileReader.readAsBinaryString()：读取指定 Blob 中的内容，完成之后，result 属性中将包含所读取文件的原始二进制数据；

  • FileReader.readAsDataURL()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

  • FileReader.readAsText()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个字符串以表示所读取的文件内容。

可以看到，上面这些方法都接受一个要读取的 blob 对象作为参数，读取完之后会将读取的结果放入对象的 result 属性中。

（2）事件处理

FileReader 对象常用的事件如下：

  • abort：该事件在读取操作被中断时触发；

  • error：该事件在读取操作发生错误时触发；

  • load：该事件在读取操作完成时触发；

  • progress：该事件在读取 Blob 时触发。

当然，这些方法可以加上前置 on 后在HTML元素上使用，比如onload、onerror、onabort、onprogress。除此之外，由于FileReader对象继承自EventTarget，因此还可以使用 addEventListener() 监听上述事件。

下面来看一个简单的例子，首先定义一个 input 输入框用于上传文件：

<input type="file" id="fileInput">

接下来定义 input 标签的 onchange 事件处理函数和FileReader对象的onload事件处理函数：

const fileInput = document.getElementById("fileInput");

const reader = new FileReader();

fileInput.onchange = (e) => {
    reader.readAsText(e.target.files[0]);
}

reader.onload = (e) => {
    console.log(e.target.result);
}

这里，首先创建了一个 FileReader 对象，当文件上传成功时，使用 readAsText() 方法读取 File 对象，当读取操作完成时打印读取结果。

使用上述例子读取文本文件时，就是比较正常的。如果读取二进制文件，比如png格式的图片，往往会产生乱码，如下：

fileOf7174.png

 

那该如何处理这种二进制数据呢？readAsDataURL() 是一个不错的选择，它可以将读取的文件的内容转换为 base64 数据的 URL 表示。这样，就可以直接将 URL 用在需要源链接的地方，比如 img 标签的 src 属性。

对于上述例子，将 readAsText 方法改为 readAsDataURL()：

const fileInput = document.getElementById("fileInput");

const reader = new FileReader();

fileInput.onchange = (e) => {
    reader.readAsDataURL(e.target.files[0]);
}

reader.onload = (e) => {
    console.log(e.target.result);
}

这时，再次上传二进制图片时，就会在控制台打印一个 base64 编码的 URL，如下：

fileOf7174.png

 

下面来修改一下这个例子，将上传的图片通过以上方式显示在页面上：

<input type="file" id="fileInput" />

<img id="preview" />

const fileInput = document.getElementById("fileInput");
const preview = document.getElementById("preview");
const reader = new FileReader();

fileInput.onchange = (e) => {
  reader.readAsDataURL(e.target.files[0]);
};

reader.onload = (e) => {
  preview.src = e.target.result;
  console.log(e.target.result);
};

fileOf7174.png

 

当上传大文件时，可以通过 progress 事件来监控文件的读取进度：

const reader = new FileReader();

reader.onprogress = (e) => {
  if (e.loaded && e.total) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`上传进度: ${percent} %`);
  }
});

progress 事件提供了两个属性：loaded（已读取量）和total（需读取总量）。

总结

以上，我们了解了几种在 JavaScript 中的一些 API 来处理文件或原始文件数据，包括：File、Blob、FileReader，当然还有其他的一些包括ArrayBuffer、base64等，接下来的文章也会对其他的 API 进行讲解，敬请关注！

标签：文件,const,读取,对象,FileReader,Blob,File
From： https://blog.csdn.net/qq_24956515/article/details/143362715

相关文章

  • kkfileview4.2.1 LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz
    ==问题==java.lang.IllegalStateException:officeHomedoesn'texistorisnotadirectory:optlibreoffice7.1==安装==kkfileview4.2.1 LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz==测试====全过程脚本==[zengwenfeng@localhostDesktop......
  • 项目自动化构建工具——make与Makefile详解
    项目自动化构建工具——make与Makefile详解在软件开发过程中，项目自动化构建是提高开发效率、减少重复劳动、确保构建一致性的重要手段。make和Makefile作为Linux及类Unix系统中不可或缺的自动化构建工具，通过定义清晰的规则和依赖关系，极大地提高了软件项目的构建效率和可维......
  • HDK Fileheader Download（2.0）
    HDKFileheaderLibraryDownload2.0Download1.13|1.13.1|1.13.2|1.13.3|1.13.4Download1.12|1.12.1|1.12.2Download1.11Download1.10|1.10.1Download1.9Download1.8|ForLinuxDownload1.7|1.7.1|1.7.2Download1.6Download1.5Downloa......
  • 如何在Linux下部署自己的ZFile开源网盘
    ZFile项目介绍ZFile是一个功能强大、灵活的开源网盘系统，为用户提供安全便捷的文件存储和共享方案。项目概述ZFile由ZFile,Inc.开发和维护，基于Docusaurus构建。其用户友好的界面支持多种文件存储和共享功能，并具备高度的可定制性和扩展性，以适应各种使用场景。功能特点Z......
  • 「漏洞复现」F22服装管理软件系统 openfile.aspx 任意文件读取漏洞
    0x01 免责声明请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次测试仅供学习使用，如若非法他用，与平台和本文作者无关，需......
  • Dockerfile 增强新语法
    Dockerfile是使用Docker的相关开发人员的基本工具，用来充当构建Docker镜像的模板，在这个文件中包含用户可以在命令行上调用来构建镜像的所有命令。了解并有效利用Dockerfile可以显着简化开发流程，实现镜像创建的自动化并确保不同开发阶段的环境一致。Dockerfile对于定义Dock......
  • 【已解决】vmware+ubunt14,编译海思3798MV100 ，HiSTBLinuxV100R005C00SPC050-master，报f
    于2023-07-1609:49:36发布没看懂，不知道问题出在哪里make[1]:Enteringdirectory/home/andy1231/Downloads/HiSTBLinuxV100R005C00SPC050-master/tools/linux/utils'make[1]:Enteringdirectory/home/andy1231/Downloads/HiSTBLinuxV100R005C00SPC050-master/source/kern......
  • HarmonyOS：DevEco Profiler调优工具
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）➤GitHub地址：https://github.com/strengthen➤原文地址：https://www.cnblogs.com/strengthen/p/18516696➤如果链接不是为敢技术的博客园地址，则可能是......
  • Java使用apache.commons.io框架下的FileUtils类实现文件的写入、读取、复制、删除
    ApacheCommonsIO是Apache开源基金组织提供的一组有关IO（Input/Output）操作的小框架，它是ApacheCommons项目的一部分，专注于提供简单易用的API，用于处理输入和输出操作。ApacheCommonsIO是一个功能强大的JavaIO工具库，提供了丰富的API来简化文件和流的操作。通过使用......
  • 【Docker】Dockerfile 指令对 Docker 镜像层数的影响
    本文内容均来自个人笔记并重新梳理，如有错误欢迎指正！如果对您有帮助，烦请点赞、关注、转发、订阅专栏！专栏订阅入口| 精选文章 | Kubernetes |Docker|Linux |羊毛资源 | 工具推荐 |往期精彩文章【Docker】（全网首发）KylinV10下MySQL容器内存占用异常的解决......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99