File、Blob、FileReader

简介: File、Blob、FileReader

虽然之前一直都会使用,但是没有系统的去学习了解,前几天有一个pdf预览的需求,刚好有用到ArrayBuffer和Blob,所以在此记录一下,供之后查阅
image.png

上图很清晰的介绍了它们之间的关系。

Blob
blob简单来说就是一个不可修改的二进制文件。

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

File 对象中只存在于浏览器环境中,在 Node.js 环境中不存在。
在 JavaScript 中,主要有两种方法来获取 File 对象:

input 元素上选择文件后返回的 FileList 对象;
文件拖放操作生成的 DataTransfer 对象(ondrop和ondragover)

FileReader
FileReader 是一个异步 API,用于读取文件并提取其内容以供进一步使用。FileReader 可以将 Blob 读取为不同的格式。
readAsDataURL()可用于选择完图片上传,直接预览的功能
readAsArrayBuffer() 可以将blob转为arrayBuffer
事件处理常用的有
load() 该事件在读取操作完成时触发;
progress() 该事件在读取 Blob 时触发。可以监控文件的读取进度。

相关文章
|
4月前
|
存储 Java 调度
FileInputStream,FileOutputStream 和 FileReader ,FileWriter 类的基本使用【 File类+IO流知识回顾②】
这篇文章回顾了Java中FileInputStream、FileOutputStream、FileReader和FileWriter类的基本使用方法,包括读取和写入文件的操作,以及字符流和字节流的区别和应用场景。
FileInputStream,FileOutputStream 和 FileReader ,FileWriter 类的基本使用【 File类+IO流知识回顾②】
|
存储
人迹罕至的FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。 这边文章主要分4 部分介绍FileReader。
63 0
|
8月前
|
XML JavaScript 前端开发
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
199 0
|
8月前
|
存储 移动开发 自然语言处理
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
141 0
|
8月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
File操作-FileReader(FileWriter)/BufferedReader(Writer)
File操作-FileReader(FileWriter)/BufferedReader(Writer)
57 0
|
Java
File操作-InputStream/OutputStream及是否创建文件
File操作-InputStream/OutputStream及是否创建文件
94 0
EasyExcel读取文件的问题:Convert excel format exception.You can try specifying the ‘excelType‘ yourself
EasyExcel读取文件的问题:Convert excel format exception.You can try specifying the ‘excelType‘ yourself
|
前端开发 JavaScript 数据安全/隐私保护
前端通过Blob或File文件获取二进制数据
前端通过Blob或File文件获取二进制数据
前端通过Blob或File文件获取二进制数据
FILE
FILE
124 0

热门文章

最新文章