Blob在js中意味着二进制大数据。实现该接口的对象有3个属性,分别是type(MIME),size(byte)和
一个切割方法:slice(在大文件分片上传可能用到)。另外,File实现了Blob接口,并且还有额外的属性--name和
lastModify。
早起的一些浏览器实现了草案(已废弃)上的BlobBuilder,但是现在的大多浏览器废弃了该对象。目前,创建新的
Blob对象需要使用Blob构造函数,new Blob(array,type)。第一个参数数组中可以包含字符串,ArrayBuffer对象或者
一个Blob对象。
现对比这两种方式:
// 构造函数创建
var ab = new ArrayBuffer(8);
var dv = new DataView(ab);
for(var i=0;i<8;i++) dv.setInt8(i,i);
var arr = ["yang li is tanGer's husband;",ab];
var b = new Blob(arr,{type: "application/octet-binary"});
console.log(b, b.type)
------------------------------------------------------------------------------
var bb = new BlobBuilder();
bb.append("yang li is tanGer's husband;")
bb.append("\0");
var ab = new ArrayBuffer(8);
var dv = new DateView(ab);
for(var i=0;i<8;i++) dv.setInt8(i,i);
bb.append(ab);
var ret = bb.getBlob("x-op\/mytype")
console.log(ret,ret.type);
可以讲blob作为参数,创建Blob URL,它是对内存或者磁盘上Blob对象的一个引用。而Data URL则是
对文件内容进行URL编码,其本身就是数据。另外,在创建Blob URL之后,浏览器便维护URL与内存或者磁盘Blob
之间的映射,Blob对象及时已经没有用处也不会被释放,因为始终有Blob URL在引用。故,需要手动的将Blob URL删除。
可通过FileReader对Blob读取,fileReader对象可监听多个事件,比较有用的是onload和onprocess。FileReader读取
Blob数据是异步进行的,可以用4种方式读取,常用的两种分别读取为文本和ArrayBuffer。
但是在web Worker中可以同步运行类似的构造方法:FileReaderSync。worker同步运行该方法并不会影响当前的主线程。
下面demo实现了一个拖动图片显示的功能:
<style>
.active{background: 1px firebrick;}
.droptarget{border:3px solid royalblue;width:400px;height:400px;margin: auto;float:left;}
</style>
--------------------------------------------------------------------------
<div class="droptarget" id="droptarget"></div>
<div style="float:left;margin-left:20px;" id="show"></div>
--------------------------------------------------------------------------
var createUrl = URL && URL.createObjectURL ||
window.webkitURL && window.webkitURL.createObjectURL ||
window.createObjectURL;
var revokeUrl = URL && URL.revokeObjectURL ||
window.webkitURL && window.webkitURL.revokeObjectURL ||
window.revokeObjectURL;
function $(id){return document.getElementById(id)}
$("droptarget").ondragenter = function(e){
var dt = e.dataTransfer;
//过滤文件
if(dt.types && dt.types.indexOf("Files") != -1){
this.classList.add("active");
}
return false;
}
$("droptarget").ondragleave = function(e){
this.classList.remove("active");
};
$("droptarget").ondragover = function(e){
return false;
}
$("droptarget").ondrop = function(e){
e.preventDefault();
var dt = e.dataTransfer;
var files,i,len,f;
var img,show = $("show");
files = dt.files;
for(i=0,len=files.length;i<len;i++){
f = files[i];
if(f.type.indexOf("image/") == -1) return;
img = new Image();
img.style.width = "400px";
img.src = createUrl(f);
img.onload = function(e){
show.innerHTML = "";
show.appendChild(img);
revokeUrl(img.src); // 手动删除Blob URL
}
}
this.classList.remove("active")
return false;
}
// 可以使用FileReader异步对Blob对象的数据进行修改
function read(blob){
var r = new FileReader();
r.readAsText(blob); // 异步读取
r.onload = function(e){
var d = r.result;
}
r.onerror = function(e){
console.log("error happens...")
}
r.onprogress = function(e){
$("droptarget").innerText = e.loaded + "/" + e.total;
}
}