Blob初探
时间:2022-05-04
本文章向大家介绍Blob初探,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
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(" ");
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;
}
}
- 小程序上线“小游戏”,正式引爆3.0社交红利
- 漫谈人工智能机器翻译的前世今生
- 并发与实例上下文模式: WCF服务在不同实例上下文模式下具有怎样的并发表现
- 区块链将变革的五个行业
- WCF技术剖析之二十三:服务实例(Service Instance)生命周期如何控制[上篇]
- AngularJS in Action读书笔记3——走近Services
- 有了这些无人驾驶的汽车,未来还需要考驾照吗?
- 并发与实例上下文模式: WCF服务在不同实例上下文模式下具有怎样的并发表现
- AngularJS in Action读书笔记4(实战篇)——创建Statistic模块
- Effective Deep Memory Networks for Relation Extraction
- ConcurrencyMode.Multiple模式下的WCF服务就一定是并发执行的吗:探讨同步上下文对并发的影响[上篇]
- WCF技术剖析之二十一:WCF基本异常处理模式[下篇]
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
- WCF中并发(Concurrency)与限流(Throttling)体系深入解析系列[共7篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PAT (Advanced Level) Practice 1029 Median (25分)
- ServiceMesh的关键:边车模式(sidecar);又要开车了
- Codeforces Round #615 (Div. 3)A. Collecting Coins
- PAT (Advanced Level) Practice 1040 Longest Symmetric String (25分)
- 【Java】23 函数式编程
- 【Java】24 常用函数式接口
- mvnw,到底是什么鬼?
- 【Java】25 Stream 流
- Codeforces Round #615 (Div. 3)D. MEX maximizing
- PAT (Advanced Level) Practice 1039 Course List for Student (25分)
- Codeforces Round #615 (Div. 3) E. Obtain a Permutation
- 数据结构实验完结撒花之内部排序比较
- Codeforces Round #615 (Div. 3) F. Three Paths on a Tree
- Matlab 内联函数及匿名函数
- 渗透测试 | 内网信息收集