js中关于Blob对象的介绍与使用

js中关于Blob对象的介绍与使用

blob对象介绍

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。


创建blob对象

创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建。 构造函数接受两个参数:

第一个参数为一个数据序列,可以是任意格式的值。

第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式,可以取值为 "transparent" 或者 "native"(transparent的话不变,是默认值,native 的话按操作系统转换) 。 }

Blob()构造函数允许使用其他对象创建一个Blob对象,比如用字符串构建一个blob

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});

既然是对象,那么blob也拥有自己的属性以及方法

属性

  • Blob.isClosed (只读)

    布尔值,指示 Blob.close() 是否在该对象上调用过。 关闭的 blob 对象不可读。

  • Blob.size (只读)

    Blob 对象中所包含数据的大小(字节)。

  • Blob.type (只读)

    一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。

方法

  • Blob.close()

    关闭 Blob 对象,以便能释放底层资源。

  • Blob.slice([start[, end[, contentType]]])

    返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。其实就是对这个blob中的数据进行切割,我们在对文件进行分片上传的时候需要使用到这个方法。

看到上面这些方法和属性,使用过HTML5提供的File接口的应该都很熟悉,这些属性和方法在File接口中也都有。 其实File接口就是基于Blob,继承blob功能并将其扩展为支持用户系统上的文件,也就是说:

File接口中的Flie对象就是继承与Blob对象。

blob对象的使用

上面说了很多关于Blob对象的一些概念性的东西,下面我们来看看实际用途。


分片上传

首先说说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器。

假如需要做到这一步,我们需要解决两个问题:

  • 怎么切割?
  • 怎么得知当前传输的进度?

首先怎么切割的问题上面已经有过说明,因为File文件对象是继承与Blob对象的,因此File文件对象也拥有slice这个方法,我们可以使用这个方法将任何一个File文件进行切割。

代码如下:

复制代码
var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {blobs.push(blob.slice(index,index + 1));
});
复制代码

通过上面的方法。我们就得到了一个切割之后的File对象组成的数组blobs;

接下来要做的时候就是讲这些文件分别上传到服务器。

在HTTP1.1以上的协议中,有Transfer-Encoding这个编码协议,用以和服务器通信,来得知当前分片传递的文件进程。

这样解决了这两个问题,我们不仅可以对文件进行分片上传,并且能够得到文件上传的进度。

粘贴图片

blob还有一个应用场景,就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后,需要在网页上进行粘贴操作。

粘贴图片我们需要解决下面几个问题

  1. 监听用户的粘贴操作

  2. 获取到剪切板上的数据

  3. 将获取到的数据渲染到网页中

首先我们可以通过paste事件来监听用户的粘贴操作:

document.addEventListener('paste', function (e) {console.info(e);
});

然后通过事件对象中的clipboardData 对象来获取图片的文件数据。

clipboardData对象介绍

介绍一下 clipboardData 对象,它实际上是一个 DataTransfer 类型的对象, DataTransfer 是拖动产生的一个对象,但实际上粘贴事件也是它。

clipboardData 的属性介绍

属性类型说明
dropEffectString默认是 none
effectAllowedString默认是 uninitialized
filesFileList粘贴操作为空List
itemsDataTransferItemList剪切板中的各项数据
typesArray剪切板中的数据类型 该属性在Safari下比较混乱

items 介绍

items 是一个 DataTransferItemList 对象,自然里面都是 DataTransferItem 类型的数据了。

属性

items 的 DataTransferItem 有两个属性 kind 和 type

属性说明
kind一般为 string 或者 file
type具体的数据类型,例如具体是哪种类型字符串或者哪种类型的文件,即 MIME-Type

方法

方法参数说明
getAsFile如果 kind 是 file ,可以用该方法获取到文件
getAsStringfunction(str)如果 kind 是 string ,可以用该方法获取到字符串str

在原型上还有一些其他方法,不过在处理剪切板操作的时候一般用不到了。

type 介绍

一般 types 中常见的值有 text/plain 、 text/html 、 Files 。

说明
text/plain普通字符串
text/html带有样式的html
Files文件(例如剪切板中的数据)

有了上面这些方法,我们可以解决第二个问题即获取到剪切板上的数据。

复制代码
document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);}}
});
复制代码

最后我们需要将获取到的数据渲染到网页上。

其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接通过HTML5的File接口将获取到的文件上传到服务器然后通过讲服务器返回的url地址来对图片进行渲染。也可以使用fileRender对象来进行图片本地浏览。

fileRender对象简介

从Blob中读取内容的唯一方法是使用 FileReader。

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

方法名参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile,[encoding]将文件读取为文本
readAsDataURLfile将文件读取为DataURL
abort(none)终端读取操作

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

事件描述
onabort中断
onerror出错
onloadstart开始
onprogress正在读取
onload成功读取
onloadend读取完成,无论成功失败

通过上面的方法以及事件,我们可以发现,通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。

最终代码如下:

复制代码
document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;var fr = new FileReader();var html = '';for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);fr.readAsDataURL(blob);fr.on<x>load=function(e){var result=document.getElementById("result");//显示文件result.innerHTML='<img src="' + this.result +'" alt="" />';}}}
});
复制代码

这样我们就可以监听到用户的粘贴操作,并且将用户粘贴的图片文件实时的渲染到网页之中了。

总结

以上是我对Blob对象的一些学习分享,希望在实际应用上能对大家有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20170102-文件处理

文件处理 正常文件处理 python 文件处理 编码 f open(file"兼职白领学生空姐模特护士练习方式.txt",mode"r",encoding"utf-8")#把值附给变量f &#xff08;路径file"文件是兼职白领学生空姐模特护士练习方式.txt"&#xff0c;文本模式…

创建.NET程序Dump的几种姿势

当一个应用程序运行的有问题时&#xff0c;生成一个 Dump 文件来调试它可能会很有用。在 Windows、Linux 或 Azure 上有许多方法可以生成转储文件。Windows 平台dotnet-dump (Windows)dotnet-dump 全局工具[1]是一种收集和分析.NET 核心应用程序 Dump 的方法。安装 dotnet-dump…

自然语言处理怎么最快入门?

2019独角兽企业重金招聘Python工程师标准>>> 本文整理自知乎上的一个问答&#xff0c;分享给正在学习自然然语言处理的朋友们&#xff01; 一、自然语言处理是什么&#xff1f; 自然语言处理说白了&#xff0c;就是让机器去帮助我们完成一些语言层面的事情&#xff…

dotnet-exec 0.8.0 released

dotnet-exec 0.8.0 releasedIntrodotnet-exec 是一个 C# 程序的小工具&#xff0c;可以用来运行一些简单的 C# 程序而无需创建项目文件&#xff0c;而且可以自定义项目的入口方法&#xff0c;支持但不限于 Main 方法Install/Updatedotnet-exec 是一个 dotnet tool&#xff0c;可…

Siamese Network理解

提起siamese network一般都会引用这两篇文章&#xff1a; 《Learning a similarity metric discriminatively, with application to face verification》和《 Hamming Distance Metric Learning》。 本文主要通过论文《Learning a Similarity Metric Discriminatively, with A…

HashMap是如何工作的

2019独角兽企业重金招聘Python工程师标准>>> 1 HashMap在JAVA中的怎么工作的&#xff1f; 基于Hash的原理 2 什么是哈希&#xff1f; 最简单形式的 hash&#xff0c;是一种在对任何变量/对象的属性应用任何公式/算法后&#xff0c; 为其分配唯一代码的方法。 一个真…

如何做到十五分钟领略PowerBI的DAX精华及框架

有小伙伴问&#xff0c;如何最快速理解整套 DAX 精华体系&#xff0c;例如&#xff1a;15分钟。这虽然是个不可能完成的任务&#xff0c;但在借助脑图PPT的强大能力下&#xff0c;还是可以做到的。如果你从没接触过 DAX&#xff0c;但未来要学习 DAX&#xff0c;以下视频值得看…

springboot配置允许跨域访问

2019独角兽企业重金招聘Python工程师标准>>> 因springboot框架通常用于前后端分离项目&#xff0c;因此需配置后台允许跨域访问&#xff08;具体看注释&#xff09;&#xff0c;配置类如下&#xff0c;将该类加入工程中即可。 import org.springframework.context.a…

机器视觉传感器选型,交互作用决定取舍

目前&#xff0c;如何选择机器视觉传感器在当代的应用可谓是越来越广泛&#xff0c;如何选择机器视觉传感器是值得我们好好学习的&#xff0c;现在我们就深入了解如何选择机器视觉传感器。 相机是机器视觉系统的眼睛&#xff0c;而相机的心脏是图像传感器。传感器的选择取决于准…

使用qrcode类制作二维码

<?phprequire_once ./phpqrcode/phpqrcode.php;/** 地址:http://phpqrcode.sourceforge.net/ 下载qrcode类* param string $url 要生成的链接* param bool $local 是否生成本地文件 * param string $logo 中间图片地址 */ echo qrcode(https://www.cnblogs.co…

《Hadoop大明白》【1】Hadoop的核心组件

为什么80%的码农都做不了架构师&#xff1f;>>> 本书适用于想对大数据平台Hadoop有深入了解的程序员朋友&#xff0c;会帮助你以后在应用开发方面趟平一些坑。 1&#xff0c;Hadoop 是一个系列大数据组件构成的应用平台&#xff0c;可由多个廉价机器搭建集群&#…

.NET7是如何优化Guid.Equals性能的?

简介在之前的文章中&#xff0c;我们多次提到 Vector - SIMD 技术&#xff0c;也答应大家在后面分享更多.NET7 中优化的例子&#xff0c;今天就带来一个使用 SIMD 优化Guid.Equals()方法性能的例子。为什么 Guid 能使用 SIMD 优化&#xff1f;首先就需要介绍一些背景知识&#…

缺氧游戏黑科技计算机,《缺氧》游戏内参数修改图文详解

很多玩家都很喜欢缺氧这款游戏&#xff0c;有时候因为一些不可告人的秘密我们需要修改游戏中的内容来达到简化我们的生存难度&#xff0c;这样就需要修改游戏的脚本&#xff0c;所幸《缺氧 》对于这个问题很宽容&#xff0c;完全没有加密地图的生成脚本&#xff0c;让我们可以完…

Python 项目实践三(Web应用程序)第四篇

接着上节继续学习&#xff0c;本章将建立用户账户 Web应用程序的核心是让任何用户都能够注册账户并能够使用它&#xff0c;不管用户身处何方。在本章中&#xff0c;你将创建一些表单&#xff0c;让用户能够添加主题和条目&#xff0c;以及编辑既有的条目。你还将学习Django如何…

新手想买二手车 先看看买车后这五个步骤吧

买二手车你该知道 很多人因为资金短缺又或者是想要一辆便宜车“练手”而选择去买一辆价格低廉&#xff0c;有着一定车龄的二手车。很多人看中二手车正正是因为便宜&#xff0c;以为是购买以后基本不需要再投入新的花费&#xff0c;殊不知这是非常错误的想法&#xff0c;因为以下…

十六进制编辑器--ImHex

十六进制编辑器是用于编辑单个字节数据的软件应用程序&#xff0c;主要由程序员或系统管理员使用。常规文本编辑器和十六进制编辑器之间的区别在于常规编辑器表示文件的逻辑内容&#xff0c;而十六进制编辑器表示文件的物理内容。十六进制编辑器可以让你以十六进制的形式查看或…

奥迪坚SVRM(Screen-Voice Recording Manager)录屏软件正式发布

奥迪坚SVRM(Screen-Voice Recording Manager)能够对座席通话同步录音的同时进行座席操作录屏 实时监控座席屏幕操作&#xff0c;及时纠正操作问题。 座席质检可以边听边看&#xff0c;为KPI考核提供依据。 利用优秀座席操作记录对座席进行培训。 监控坐席人员对敏感信息访问次数…

小米:开源不仅要站在巨人的肩膀上,还要为巨人指方向

今天上午&#xff0c;第一届小米开源技术峰会在北京举行&#xff0c;会上&#xff0c;小米人工智能与云平台副总裁崔宝秋致开场词&#xff0c;并发表了《小米开源之路》的演讲。 崔宝秋强调小米一直在推动开源&#xff0c;也是开源的倡导者。他告诉我们雷军创立小米的其中一个重…

《设计模式》3.结构型模式

点击进入我的博客 3.1 适配器模式 适配器模式把一个类的接口变换成客户端所期待的另一种接口&#xff0c;使得原本因接口不匹配而无法在一起工作的两个类能够在一起工作。 3.1.1 类的适配器结构 目标&#xff08;Target&#xff09;角色&#xff1a;这就是所期待得到的接口&…

最快的计算机操作,世界十大最快的超级计算机

最近&#xff0c;《联邦储备技术》杂志对全球超级计算机进行了排名&#xff0c;并从中选出了十个最快的超级计算机. 其中&#xff0c;中国有两台超级计算机进入了榜单&#xff0c;而“天河2号”则依靠双精度浮点算术峰. 速度达到了每秒5490亿次&#xff0c;占据了王位.这也是两…