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面向对象编程 for Cookie
Sep 19 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
js函数和this用法实例分析
Mar 13 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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中用hash实现的数组
2011/07/17 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
使用python实现tcp自动重连
2017/07/02 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
音乐教师个人工作总结
2015/02/06 职场文书
财务人员个人工作总结
2015/02/27 职场文书
花田少年史观后感
2015/06/16 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
css3新特性的应用示例分析
2022/03/16 HTML / CSS