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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
快速入门Vue
Dec 19 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php删除数组元素示例分享
2014/02/17 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
美国钻石商店:Zales
2016/11/20 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
gateway网关接口请求的校验方式
2021/07/15 Java/Android
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript