JavaScript之Blob对象类型的具体使用方法


Posted in Javascript onNovember 29, 2019

Blob(Binary Large Object)术语最初来自数据库(oracle 中也有类似的栏位类型。),早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。 

 在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

JavaScript之Blob对象类型的具体使用方法

构建一个Blob对象通常有三种方式:

  • 通过Blob对象的构造函数来构建。
  • 从已有的Blob对象调用slice接口切出一个新的Blob对象。
  • canvas API toBlob方法,把当前绘制信息转为一个Blob对象。下面只看第一种的实现:

用法:新方法创建Blob 对象(构造函数来构建)

var blob = new Blob(array[optional], options[optional]);

构造函数,接受两个参数

第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。

第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:

MimeType mimeType = MimeType.toEnum(file.getContentType());)。
<script>
 var blob = new Blob(["Hello World!"],{type:"text/plain"});
 </script>

Blob对象的基本属性:

  • size :Blob对象包含的字节数。(只读)
  • type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。

原生对象构建Blob

<script type="text/javascript">
window.onload = function() {
 var blob = new Blob(1234);
}
</script>

提示出错:

Uncaught TypeError: Failed to construct ‘Blob': The 1st argument is neither an array, nor does it have indexed properties.

原因在于Blob构造函数要求第一个参数必须是数组,而这里第一个参数既不是一个数组,也没有可索引的属性。既然这里提到了对象的可索引属性,让我联想到了类数组的概念,而Arguments就是一个很好的例子。来试一试:

<script type="text/javascript">
function testArgumentsBlob() {
 var blob = new Blob(arguments);
 console.log(blob.size);//3
 console.log(blob.type);//""
}
window.onload = function() {
 testArgumentsBlob(1, 2, 3);
}
</script>

可以看到即使是类数组对象,而数组元素类型是Number也能得出正确的结论,猜想大概是由于构造函数内部把Number转化为String的缘故吧!

再来试一试其他的参数类型:

window.onload = function() {
 var arg = {hello: "2016"};
 var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"});
 console.log(blob.type);//application/json
 console.log(blob.size);//20
}

blob.type等于application/json没问题。arg转为字符串后的长度为16加上制表符\t的宽度4个字节等于20。

Blob对象的基本方法: 

大文件分割 (slice() 方法),slice方法与数组的slice类似。

Blob.slice([start, [end, [content-type]]])

slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 

可以写一个兼容各浏览器的方法:

function sliceBlob(blob, start, end, type) {
 type = type || blob.type;
 if (blob.mozSlice) {
  return blob.mozSlice(start, end, type);
 } else if (blob.webkitSlice) {
  return blob.webkitSlice(start, end type);
 } else {
  throw new Error("This doesn't work!");
 }
 }

利用Blob显示缩略图`

var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.multiple = true;
input.style.display = "none";
document.body.appendChild(input);

var fileSelect = document.createElement("a");
fileSelect.href = "#";
fileSelect.appendChild(document.createTextNode("Choose files"));
document.body.appendChild(fileSelect);

var imgList = document.createElement("div");
imgList.innerHTML = "<p>No file Selected!</p>"
document.body.appendChild(imgList);

input.addEventListener("change", function(e) {
var files = this.files;
if(!files.length) {
return;
}
imgList.innerHTML = "";
var list = document.createElement("ul");
imgList.appendChild(list);
for(var i = 0; i < files.length; i++) {
var li = document.createElement("li"); 
list.appendChild(li);

var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);
img.height = 60;
img.width = 60;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + ":" + files[i].size + " bytes";
li.appendChild(info);
}
}, false);

fileSelect.addEventListener("click", function(e) {
input.click(); 
e.preventDefault();
}, false);

由于File对象继承自Blob,所以我们可以很方便的利用File对象加载本地系统图片文件,并通过createObjectURL生成一个URL并加以显示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
VuePress 中如何增加用户登录功能
Nov 29 #Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 #Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 #Javascript
Vue基础配置讲解
Nov 29 #Javascript
jQuery实现弹幕特效
Nov 29 #jQuery
Vue实现多标签选择器
Nov 28 #Javascript
swiper实现异形轮播效果
Nov 28 #Javascript
You might like
输出控制类
2006/10/09 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
大学生自我评价怎样写好
2013/10/23 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
小学三年级学生评语
2014/04/22 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
田径运动会通讯稿
2015/07/18 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis