[HTML5] Blob对象

转载 2016年10月03日 10:45:43

http://www.cnblogs.com/hhhyaaon/p/5928152.html

写在前面

本篇主要总结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, length:number, contentType:string)
  • start:开始索引,默认为0
  • length:截取长度
  • contentType:新Blob的MIME类型,默认为空字符串

通过canvas.toBlob()

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) {
            //文件分片
            for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
                chunks[i] = file.slice(i * chunk, chunk);
            }
            
            // 采用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](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)
[2] [W3C Working Draft](https://www.w3.org/TR/FileAPI/)

分类: HTML5

关于 HTML5 的文件上传处理,兼容,以及 BLOB 对象的使用

目前 HTML5 已经逐渐普及并成为主流,与之相关的 Single Page App 技术也逐渐被广泛应用起来,加上 Canvas 等等新的工具的支持,在前端可以做的事情可谓是非常多。 但是...
  • moonpure
  • moonpure
  • 2016年01月05日 13:45
  • 19841

利用数据库如何存入BLOB格式图片,并从数据库中取出BLBO格式图片显示出来

这两天需要在图片存储性能方面做一些
  • yujin753
  • yujin753
  • 2014年05月16日 10:21
  • 8818

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = c...
  • cuixiping
  • cuixiping
  • 2015年05月27日 01:14
  • 61058

使用HTML5中的Blob对象实现媒体播放功能

实现从服务器其他路径(不在webContent路径下)获取文件,并进行显示或播放的功能。其原理是,首先通过ajax请求,获取blob对象,在这个过程中就可以进行访问限制(例如,访问时检测用户是否登录等...
  • SVictorique
  • SVictorique
  • 2017年02月06日 14:32
  • 6072

浅谈HTML5中的二进制大对象Blob

1、Blob是什么? 在计算机中,Blob常常是数据库中用来存储二进制文件的字段类型,MySQL中的Blob类型就只是个二进制数据容器。 在HTML5中,Blob是一种JavaScript的对象类型,...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月19日 15:15
  • 1341

HTML5的Blob对象简介

HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN...
  • u013891299
  • u013891299
  • 2014年03月05日 13:06
  • 1166

Html5——File、FileReader、Blob、Fromdata对象

File File 接口提供有关文件的信息,并允许网页中的JavaScript访问其内容。 File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容。通常情况下,File对象是来自用户...
  • mr_wuch
  • mr_wuch
  • 2017年04月12日 13:08
  • 1091

[JS进阶] JS 之Blob 对象类型

Blob 是什么? 这里说的是一种Javascript的对象类型。 oracle 中也有类似的栏位类型。 在 [JS进阶] HTML5 之文件操作(file) 这一篇中用到了File对象,而实际...
  • oscar999
  • oscar999
  • 2014年11月30日 21:23
  • 82668

js Blob对象介绍

什么是Blob?Blob是一种JavaScript的对象类型。HTML5的文件操作对象,file对象就是Blob的一个分支或说一个子集。 Blob 存储大量的二进制数据,Blob自己本身的属性有两个...
  • FarmerXiaoYi
  • FarmerXiaoYi
  • 2017年08月09日 15:15
  • 1143

JS 上传文件之FormData 与Blob 对象

SA $.domLoad(function () { var formdata = new FormData(); ...
  • for_cxc
  • for_cxc
  • 2017年03月20日 17:56
  • 3317
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[HTML5] Blob对象
举报原因:
原因补充:

(最多只允许输入30个字)