HTML5 Blob对象的具体使用
写在前面
本篇主要总结blob对象属性及作用,通过demo介绍blob对象的应用场景。
blob对象
一直以来,js都没有比较好的可以直接处理二进制的方法。而blob的存在,允许我们可以通过js直接操作二进制数据。
一个blob对象就是一个包含有只读原始数据的类文件对象。blob对象中的数据并不一定得是javascript中的原生形式。file接口基于blob,继承了blob的功能,并且扩展支持了用户计算机上的本地文件。
blob对象可以看做是存放二进制数据的容器,此外还可以通过blob设置二进制数据的mime类型。
创建blob
通过构造函数
var blob = new blob(dataarr:array<any>, opt:{type:string});
dataarray:数组,包含了要添加到blob对象中的数据,数据可以是任意多个arraybuffer,arraybufferview, blob,或者 domstring对象。
opt:对象,用于设置blob对象的属性(如:mime类型)
1、创建一个装填domstring对象的blob对象
2、创建一个装填arraybuffer对象的blob对象
3、创建一个装填arraybufferview对象的blob对象(arraybufferview可基于arraybuffer创建,返回值是一个类数组。如下:创建一个8字节的arraybuffer,在其上创建一个每个数组元素为2字节的“视图”)
通过blob.slice()
此方法返回一个新的blob对象,包含了原blob对象中指定范围内的数据
blob.slice(start:number, end:number, contenttype:string)
start:开始索引,默认为0
end:截取结束索引(不包括end)
contenttype:新blob的mime类型,默认为空字符串
var canvas = document.getelementbyid("canvas"); canvas.toblob(function(blob){ console.log(blob); });
应用场景
前面提到,file接口基于blob,继承了blob的功能并进行了扩展,故我们可以像使用blob一样使用file对象。
分片上传
通过blob.slice方法,可以将大文件分片,轮循向后台提交各文件片段,即可实现文件的分片上传。
分片上传逻辑如下:
- 获取要上传文件的file对象,根据chunk(每片大小)对文件进行分片
- 通过post方*循上传每片文件,其中url中拼接querystring用于描述当前上传的文件信息;post body中存放本次要上传的二进制数据片段
- 接口每次返回offset,用于执行下次上传
下面是分片上传的简单实现:
initupload(); //初始化上传 function initupload() { var chunk = 100 * 1024; //每片大小 var input = document.getelementbyid("file"); //input file input.onchange = function (e) { var file = this.files[0]; var query = {}; var chunks = []; if (!!file) { var start = 0; //文件分片 for (var i = 0; i < math.ceil(file.size / chunk); i++) { var end = start + chunk; chunks[i] = file.slice(start , end); start = end; } // 采用post方法上传文件 // url query上拼接以下参数,用于记录上传偏移 // post body中存放本次要上传的二进制数据 query = { filesize: file.size, datasize: chunk, nextoffset: 0 } upload(chunks, query, successperupload); } } } // 执行上传 function upload(chunks, query, cb) { var querystr = object.getownpropertynames(query).map(key => { return key + "=" + query[key]; }).join("&"); var xhr = new xmlhttprequest(); xhr.open("post", "http://xxxx/opload?" + querystr); xhr.overridemimetype("application/octet-stream"); //获取post body中二进制数据 var index = math.floor(query.nextoffset / query.datasize); getfilebinary(chunks[index], function (binary) { if (xhr.sendasbinary) { xhr.sendasbinary(binary); } else { xhr.send(binary); } }); xhr.onreadystatechange = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { var resp = json.parse(xhr.responsetext); // 接口返回nextoffset // resp = { // isfinish:false, // offset:100*1024 // } if (typeof cb === "function") { cb.call(this, resp, chunks, query) } } } } } // 每片上传成功后执行 function successperupload(resp, chunks, query) { if (resp.isfinish === true) { alert("上传成功"); } else { //未上传完毕 query.offset = resp.offset; upload(chunks, query, successperupload); } } // 获取文件二进制数据 function getfilebinary(file, cb) { var reader = new filereader(); reader.readasarraybuffer(file); reader.onload = function (e) { if (typeof cb === "function") { cb.call(this, this.result); } } }
以上是文件分片上传前端的简单实现,当然,此功能还可以更加完善,如后台需要对合并后的文件大小进行校验;或者前端加密文件,全部上传完毕后后端解密校验等,此处不做赘述。
通过url下载文件
window.url对象可以为blob对象生成一个网络地址,结合a标签的download属性,可以实现点击url下载文件
实现如下:
createdownload("download.txt","download file"); function createdownload(filename, content){ var blob = new blob([content]); var link = document.createelement("a"); link.innerhtml = filename; link.download = filename; link.href = url.createobjecturl(blob); document.getelementsbytagname("body")[0].appendchild(link); }
执行后页面上会生成此blob对象的地址,点击后可下载:
查看下载结果:
通过url显示图片
我们知道,img的src属性及background的url属性,都可以通过接收图片的网络地址或base64来显示图片,同样的,我们也可以把图片转化为blob对象,生成url(url.createobjecturl(blob)),来显示图片。
小结
本文主要介绍了blob对象的属性和使用场景,其实我们可以看到,blob对象作为一个装填二进制数据的基本对象,其作用也仅仅是一个容器,而真正的业务功能则需要通过filereader、url、canvas等对象实现,之后会继续对这些对象的功能和应用场景进行归纳。
参考资料
[1] mdn_blob
[2] w3c working draft
到此这篇关于html5 blob对象的具体使用的文章就介绍到这了,更多相关html5 blob对象内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: 好消息 OR 坏消息
下一篇: 中级实训 Part4 问题回答