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,一经查实,立即删除!

相关文章

计算机应用基础答案解析,计算机应用基础答案

专业课作业1.一般认为&#xff0c;世界上第一台电子数字计算机诞生于________。A.1946年2.当前的计算机一般被认为是第四代计算机&#xff0c;它所采用的逻辑元件是_______。C.大规模集成电路3、下列关于世界上第一台电子计算机ENIAC的叙述中&#xff0c;错误的是_______。D.确…

光伏发展路线图将发布 促产业优胜劣汰

工信部官网3月2日消息&#xff0c;工信部发布《2016年我国光伏产业运行情况》。2016年&#xff0c;我国光伏产业总产值达3360亿元&#xff0c;同比增长27%。下一步将继续发布《中国光伏产业发展路线图》(2017年版)&#xff0c;推动应用光伏系统的新能源充电设施试点&#xff0c…

20170102-文件处理

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

博世豪掷10亿欧元德国建半导体工厂,要掌握自动驾驶芯片化核心竞争力?

日前&#xff0c;据路透社报道&#xff0c;全球顶级零部件供应商博世正在位于德国东部的德累斯顿市兴建半导体工厂&#xff0c;总投资预计达10亿欧元(约合11亿美元)。据悉&#xff0c;此举凸显了博世对自动驾驶汽车以及工业物联网方向的双重布局。 据雷锋网(公众号&#xff1a;…

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

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

计算机专业英语怎么翻译,计算机专业英语翻译(附件).pdf

Lesson 1. PC 概述概述概述概述提到 “技术”一词&#xff0c;大多数人会想到计算机。我们生活中的几乎每个方面都有一些计算机化的成份。家里的电器中内置了微处理器&#xff0c;电视机也是如此&#xff0c;就连汽车上面也有计算机。但是&#xff0c;人们首先想到的计算机通常…

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

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

点分治题表

poj1741: tree bzoj2152: 聪聪可可 bzoj2599: [IOI2011]Race [SPOJ1825]免费旅行 bzoj4016: [FJOI2014]最短路径树问题 &#xff08;字典序挺骚&#xff09; 转载于:https://www.cnblogs.com/TSHugh/p/8179241.html

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;可…

政策推动加速5G发展 全球统一标准成大势所趋

2017IMT-2020(5G)峰会6月12日至13日在京召开。英特尔院士、通信与设备事业部无线标准首席技术专家吴耕对本网记者表示&#xff0c;未来5G技术不仅仅会以单个技术的身份去发展&#xff0c;它会和行业进行更多的融合。随着行业的发展、平台的发展、跨行业的融合&#xff0c;人们会…

普通高中段计算机学科知识,高中计算机学科的特点及教学内容浅探

摘要&#xff1a;为培养跨世纪接班人,发展和提高我国的计算机技术和水平,培养学生的计算机意识,普及计算机文化,提高科学文化素质,许多中学都相继开设了计算机课程,计算机课程将逐步成为中小学的一门独立的知识性与技能性相结合的基础性学科.计算机课程的开设,丰富了基础教育的…

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; 为其分配唯一代码的方法。 一个真…

英特尔布局5G 提供端到端的解决方案

错失了移动互联设备市场的英特尔&#xff0c;想在5G和物联网上抢得先机。 在英特尔5G行业发展沙龙上&#xff0c;英特尔院士、通信与设备事业部无线标准首席技术专家吴耕表示&#xff0c;全球对5G产业有相当高的期待&#xff0c;下一代网的研发重心就是从以人为本的网向以物为本…

计算机网络实验进入实时模式,计算机网络实验1 PacketTrace基本使用.doc

计算机网络实验1 PacketTrace基本使用太原理工大学现代科技学院计算机通信网络课程 实验报告专业班级学 号姓 名指导教师 实验名称 同组人专业班级 学号 姓名 成绩一、实验目的掌握Cisco Packet Tracer 软件的使用方法。二、实验任务在Cisco Packet Tracer 中用HUB 组建局域网&…

adb不识别设备(手机)的若干情形及解决方法

1.执行adb root 提示adb: unable to connect for root: no devices/emulators found&#xff1b;执行adb devices ,List下无设备 》往往是数据线或USB插口问题&#xff0c;换根数据线或换个USB插口试试 2.执行adb devices List下提示 “592b925b no permissions (verify ud…

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

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

php html 转xml,用PHP生成XML文档(转义字符)

用PHP生成XML文档(转义字符)我正在从PHP脚本生成XML文档&#xff0c;并且需要转义XML特殊字符。我知道应该转义的字符列表&#xff1b; 但是正确的方法是什么&#xff1f;应该使用反斜杠(\)来转义字符还是正确的方法&#xff1f;有内置的PHP函数可以为我处理此问题吗&#xff1…

【例题 8-13 UVA - 11093】Just Finish it up

【链接】 我是链接,点我呀:) 【题意】 在这里输入题意 【题解】 尺取法。 假设现在取[l..r]这一段。 然后发现累加的和小于0了。 那么方法只能是不走l..l1这一段了 即delta递减(p[l]-q[l]); 直到delta>0为止。 某个时刻如果发现r1l 或者l1且rn 则合法。 如果发现l大于n了.…

springboot配置允许跨域访问

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