初识Blob和Filereader
Blob
Blob
对象表示一个不可变,原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。
Blob
表示的不一定是javascript原生格式的数据,File
接口基于Blob
,继承了blob的功能并将其扩展使其支持用户系统上的文件
要从其他非blob对象和数据构造一个Blob
,请使用Blob()
构造函数。如果要创建blob
的子集,可以使用slice
方法。
构造函数
Blob()构造函数返回一个新的Blob对象,blob的内容由参数数组中给出的值的串联组成
const aBlob = new Blob(array[, options])
构造函数接受两个参数,第一个参数是数组,成员是字符串或二进制对象等,表示新生成的Blob实例对象的内容。第二个参数可选,表示配置对象,有两个属性,type,默认值为空字符串,表示将会被放入到blob中的数组内容的MIME类型;endings,默认值是"transpartent",用于指定包含行结束符的字符串如何被写入。
示例
const obj = { hello: 'world' }
const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })
console.log(blob);
// Blob {size: 17, type: 'application/json'}
实例属性
- Blob.size:只读,Blob对象中所包含数据的大小(字节)
- Blob.type:只读,一个字符串,表示该Blob对象所包含数据的MIME类型,如果类型未知,则该值为空字符串
实例方法
- Blob.text():返回一个Promise且包含blob所有内容的UTF-8格式的
USVString
- Blob.arrayBuffer():返回一个Promise且包含blob所有内容的二进制格式的
ArrayBuffer
- Blob.stream():返回一个能读取blob内容的
ReadableStream
- Blob.slice([start[, end[, contentType]]]):返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据
- start:可选,Blob里的起始下标,如果为负数,从数据的末尾开始从后往前计算,默认值0,如果start的长度大于源Blob的长度,返回一个长度为0并且不包含任何数据的Blob对象
- end:可选,Blob里的一个下标,如果为负数,从数据的末尾开始从后往前计算,默认值为源Blob的长度
- contentType:可选,给新的Blob赋予一个新的文档类型 type,默认值为空字符串
blob.slice(1, 3, 'application/json')
// Blob {size: 2, type: 'application/json'}
blob.slice(33, 3)
// Blob {size: 0, type: ''}
从Blob中提取数据
一种从Blob中读取内容的方法是使用FileReader
下载文件
相关知识点:
URL.createObjectURL()
URL.createObjectURL()
会创建一个DOMString,其中包含一个表示参数中给出的对象的URL,这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。返回值格式 blob:URL
在每次调用createObjectURL()
方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不需要这些URL对象时,每个对象必须调用URL.revokeObjectURL()
方法来释放。
URL.revokeObjectURL()
URL.revokeObjectURL()
方法用来释放一个之前已经存在的,通过调用URL.createObjectURL()
方法创建的URL对象。当你结束使用某个URL对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
function download(blob){const url = URL.createObjectURL(blob)const link = document.createElement('a')document.body.appendChild(link)link.download = file.name // download属性指定文件名link.href = url // 为href属性指定下载链接link.click() // 触发link的click事件document.body.removeChild(link)URL.revokeObjectURL(url)
}
// download方法传入的参数可以是File对象也可以是Blob对象
读取文件内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="input"><button onclick="getFile()">提交</button><script>function getFile() {let fileDom = document.querySelector('#input')console.log(fileDom.files)const file = fileDom.files[0]const reader = new FileReader()reader.readAsText(file, 'UTF-8')reader.onload = function() {console.log(reader.result)}}</script>
</body>
</html>
FileReader
FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件的内容,使用File
或Blob
对象指定要读取的文件或内容。
注意:FileReader仅用于以安全的方式从用户(远程)系统读取文件内容,它不能用于从文件系统中按路径名简单的读取文件。要在js中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取。
构造函数
使用FileReader()
构造器去创建一个新的FileReader
const reader = new FileReader()
实例属性
- FileReader.error:只读,表示在读取文件时发生的错误,一个DOMException
- FileReader.readyState:只读,表示FileReader状态的数据
- 值为0,表示还没加载任何数据,EMPTY
- 值为1,表示数据正在被加载,LOADING
- 值为2,表示已完成全部的读取请求,DONE
reader = new FileReader()
console.log(reader.readyState) // 0
reader.readAsText(file, 'UTF-8')
console.log(reader.readyState) // 1
reader.onload = function() {console.log(reader.readyState) // 2
}
- FileReader.result:只读,文件的内容,该属性仅在读取操作完成后才有效,数据的格式取决于使用哪种方法来启动读取操作
实例方法
- FileReader.abort():中止读取操作,在返回时,readyState属性为DONE
FileReader
对象提供了四个方法,处理Blob对象,Blob对象作为参数传入这些方法,然后以指定的格式返回
- FileReader.readAsText():将Blob或File对象根据特殊的编码格式转换为字符串形式内容,可以指定文本编码,默认UTF-8。常用来读取文本文件
- FileReader.readAsArrayBuffer():将Blob或File对象读取的文件数据转换为一个ArrayBuffer对象
- FileReader.readAsBinaryString():将Blob或File对象读取的文件数据转换为文件原始二进制格式,该特性是非标准的,尽量不要在生产环境使用
- FileReader.readAsDataURL():将Blob或File对象读取的文件数据转换为包含一个
data:
URL格式的字符串(Base64编码)
事件处理
- FileReader.onloadstart:处理loadstart事件,该事件在读取操作开始时触发
- FileReader.onload:处理load事件,该事件在读取操作完成时触发
- FileReader.onloadend:处理loadend事件,该事件在读取操作结束时(要么成功,要么失败)触发
- FileReader.onerror:处理error事件,该事件在读取操作发生错误时触发
- FileReader.onabort:处理abort事件,该事件在读取操作被中断时触发
- FileReader.onprogress:处理progress事件,该事件在读取Blob时触发
reader = new FileReader()
reader.readAsText(file, 'UTF-8')
reader.onloadstart = function() {console.log("start");
}
reader.onprogress = function() {console.log("progress");
}
reader.onload = function() {console.log("load")
}
reader.onloadend = function() {console.log("end")
}
// start
// progress
// load
// end
初识Blob和Filereader相关推荐
- 谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
当互联网进入存量时代,增量正在成为行业的稀缺资源.而本地生活服务恰恰是当前互联网行业为数不多的增量. 前瞻产业研究院数据显示,2021年中国互联网本地生活服务行业市场规模达到2.6万亿元,到2025年 ...
- audio标签 FileReader blob转base64 base64转blob 语音
base64转blob内容 function sentComment() {var url = $("#albumItemCommentURL").val();var params ...
- ArrayBuffer和TypedArray,以及Blob的使用
前端使用TypedArray编辑二进制 ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过Fil ...
- new blob文件设置编码_前端下载文件amp;下载进度
前端最基础的就是 HTML+CSS+Javascript.掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些.前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础 ...
- Blob File
文章目录 学习链接 Blob 创建 演示 分片 演示 File input 手动拖拽 fetch 从后端获取流 前端代码 后端代码 window.showOpenFilePicker Fileread ...
- Deno 兼容浏览器具体指的是什么?
Deno 里面有一句描述:"Aims to be browser compatible",可以看到 Deno 的目标是兼容浏览器.那么这里的兼容浏览器到底如何是什么意思呢? 我简单 ...
- [JavaScript]为JS处理二进制数据提供可能性的WEB API
写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...
- AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
- H5直播之MSE(Media Source Extensions)
参考 w3c media-source Media Source 系列 - 使用 Media Source Extensions 播放视频 全面进阶 H5 直播 无 Flash 时代,让直播拥抱 H5 ...
最新文章
- C#实现有向无环图(DAG)拓扑排序
- 生物信息课程学习 --- 比对,BLAST,马尔可夫
- 怎么把python结果全部显示-python – 如何展开输出显示以查看更多列?
- 单片机中断机制对日常生活的启示_单片机原理与接口技术(高起专)阶段性作业1...
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
- keepalive之LVS-DR架构
- 本页不但包含安全的内容,也包含不安全的内容。是否显示不安全的内容
- 不同网段无法加载ArcGIS Server发布服务解决方法
- python操作office word模板
- coreldrawx4缩略图显示不出来_CDR缩略图不显示怎么办?CorelDRAW缩略图不显示解决办法 - 优优下载站...
- SegNet算法详解
- 基于SSM房屋租赁管理系统
- win7任务栏谷歌浏览器图标显示异常
- SQP验厂要怎么做?
- 参考文献中文刊名的英文缩写对照表
- 社会保险费的缴费基数与缴费比例
- 【ACM】kuangbin基础数论专题
- word文档图片画红线_在Word中巧妙绘制漂亮分割线的方法
- LR字符串截取lr_save_var
- 视觉SLAM十四讲第二章学习与课后题与随笔日记