Blob数据类型及应用

Blob数据类型及应用JavaScript中有一种专门存放二进制数据的数据类型对象,叫blob,是从HTML5引入的。blob的英文名称为BinaryLargeObject,即二进制的大型对象。File对象继承自blob对象,并有一些额外的拓展功能。创建方法利用构造函数Blob(array,options)array:必需,数组类型,其中数组元素是二进制对象或者字符串;options:可选,对二进…

JavaScript中有一种专门存放二进制数据的数据类型对象,叫blob,是从HTML5引入的。
blob的英文名称为Binary Large Object,即二进制的大型对象。
File对象继承自blob对象,并有一些额外的拓展功能。

创建方法

利用构造函数Blob(array, options)

array: 必需,数组类型,其中数组元素是二进制对象或者字符串;
options: 可选,对二进制数据的MIME类型说明,包含两个属性,type和endings;

var blob = new Blob(['Hello World'], { 
   
	type: 'text/plain', // MIME类型说明
	endings: 'transparent' // 默认transparent,还可以为native;
})

slice(start[, end[, contentType ]]])

从一个源blob对象生成一个新blob对象,包含了源blob对象中指定范围的数据,以字节为单位。
start: 数据起始位置,默认为0;
end: 数据结束位置,默认为blob对象的size属性;
contentType: 规定新的blob对象的MIME类型,即给type属性传入该值;

属性(都是可读)

size:返回当前对象的字节长度;
type:返回数据的MIME类型;

读取数据

从blob对象中读取数据的唯一方法就是利用FileReader对象的方法,不同的方法针对读取后的数据类型,如readAsArrayBuffer()方法将数据读取为类型数组;

应用场景

大文件分段上传

将大文件用slice()方法切割成段,分段上传;

通过URL下载文件

创建标签元素,将文件内容用blob构造函数创建为blob对象;
用window对象的属性URL对象的方法createObjectURL(),传入刚刚创建的blob对象,返回一个DOMString对象,赋予标签元素的href属性。
设置标签的download属性为下载文件的文件名(加文件扩展名)。
点击标签即可下载;

URL全局对象的应用

URL作为window对象的属性,其中静态方法URL.createObjectURL()方法应用最多,可以用于在浏览器上预览图片和视频,以及下载文件,但不管是图片还是视频,本质上都是二进制数据,这些数据必须是本地硬盘或者是内存中的才行(内存中的数据可以是通过ajax请求得到的)。
URL.createObjectURL()方法将file或者blob转为DOMSring字符串(UTF-16编码),元素的src或者href属性都可以赋值为该DOMString字符串。

今天的文章Blob数据类型及应用分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/26913.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注