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 相关文章推荐
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
JavaScript实现消消乐的源代码
Jan 12 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
C# Assembly类访问程序集信息
2009/06/13 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php网页病毒清除类
2014/12/08 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python编程羊车门问题代码示例
2017/10/25 Python
详解Python如何生成词云的方法
2018/06/01 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
django下创建多个app并设置urls方法
2020/08/02 Python
实习指导老师意见
2015/06/04 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS