HTML5 Blob对象的具体使用


Posted in HTML / CSS onMay 22, 2020

写在前面

本篇主要总结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对象

HTML5 Blob对象的具体使用

2、创建一个装填ArrayBuffer对象的Blob对象

HTML5 Blob对象的具体使用

3、创建一个装填ArrayBufferView对象的Blob对象(ArrayBufferView可基于ArrayBuffer创建,返回值是一个类数组。如下:创建一个8字节的ArrayBuffer,在其上创建一个每个数组元素为2字节的“视图”)

HTML5 Blob对象的具体使用

通过Blob.slice()

此方法返回一个新的Blob对象,包含了原Blob对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)

start:开始索引,默认为0
end:截取结束索引(不包括end)
contentType:新Blob的MIME类型,默认为空字符串

HTML5 Blob对象的具体使用

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});

HTML5 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对象的地址,点击后可下载:

HTML5 Blob对象的具体使用

查看下载结果:

HTML5 Blob对象的具体使用

通过url显示图片

我们知道,img的src属性及background的url属性,都可以通过接收图片的网络地址或base64来显示图片,同样的,我们也可以把图片转化为Blob对象,生成URL(URL.createObjectURL(blob)),来显示图片。

HTML5 Blob对象的具体使用

小结

本文主要介绍了Blob对象的属性和使用场景,其实我们可以看到,Blob对象作为一个装填二进制数据的基本对象,其作用也仅仅是一个容器,而真正的业务功能则需要通过FileReader、URL、Canvas等对象实现,之后会继续对这些对象的功能和应用场景进行归纳。

参考资料

[1] MDN_Blob
[2] W3C Working Draft

到此这篇关于HTML5 Blob对象的具体使用的文章就介绍到这了,更多相关HTML5 Blob对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 #HTML / CSS
html5用video标签流式加载的实现
May 20 #HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 #HTML / CSS
video实现有声音自动播放的实现方法
May 20 #HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 #HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 #HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 #HTML / CSS
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js查错流程归纳
2012/05/04 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
以下的初始化有什么区别
2013/12/16 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
学生会竞选自荐信
2013/10/12 职场文书
电子商务专业学生的学习自我评价
2013/10/27 职场文书
2014年关工委工作总结
2014/11/17 职场文书
初婚初育证明范本
2014/11/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
安全保证书格式
2015/02/28 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技