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 AspxButton的客户端操作
Jun 26 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
javascript 闭包详解
Jul 02 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信开发 微信授权详解
Oct 21 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
vue移动端使用canvas签名的实现
Jan 15 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
利用php获取服务器时间的实现代码
2013/06/07 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
详解Vue SPA项目优化小记
2018/07/03 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
群众路线专项整治方案
2014/10/27 职场文书
技能培训通讯稿
2015/07/18 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python