Blob 是什么? 这里说的是一种JavaScript的对象类型。

Oracle 中也有类似的栏位类型。

[JS进阶] HTML5 之文件操作(file)

这一篇中用到了File对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。

所以, 在大多数情况下,blob 对象和 file 对象可以用在同一个地方,例如,可以使用 FileReader 借口从 blob 读取数据,也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

如何创建Blob

1. 使用旧方法创建 Blob 对象。

旧的方法使用 BlobBuilder 来创建一个Blob 实例,并且使用一个 append() 方法,将字符串(或者 ArrayBuffer 或者 Blob,此处用 string 举例)插入,一旦数据插入成功,就可以使用 getBlob() 方法设置一个 mime 。

  1. <script>
  2. var builder = new BolbBuilder();
  3. builder.append("Hello World!");
  4. var blob = builder.getBlob("text/plain");
  5. </script>

2. 新方法创建Blob 对象

在新的方法中直接可以通过 Blob() 的构造函数来创建了。
构造函数,接受两个参数,第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:

type -- MIME 的类型。

endings -- 决定 append() 的数据格式,(数据中的 \n 如何被转换)可以取值为 "transparent" 或者 "native"(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。

  1. <script>
  2. var blob = new Blob(["Hello World!"],{type:"text/plain"});
  3. </script>

Blob的应用

1. 大文件分割 (slice() 方法)

slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice()

可以写一个兼容各浏览器的方法:

  1. function sliceBlob(blob, start, end, type) {
  2. type = type || blob.type;
  3. if (blob.mozSlice) {
  4. return blob.mozSlice(start, end, type);
  5. } else if (blob.webkitSlice) {
  6. return blob.webkitSlice(start, end type);
  7. } else {
  8. throw new Error("This doesn't work!");
  9. }
  10. }

2.  在Chrome 中指定下载的文件名;

具体可以参考:

Web 端 js 导出csv文件(使用a标签)

浏览器支持

js blob的更多相关文章

  1. 文件导出也可以这么写【js+blob】

    文件导出在软件开发中是个比较常用的功能,基本原理也很简单: 浏览器向后台发送一个Get请求 后台处理程序接收到请求后,经过处理,返回二进制文件流 浏览器接收到二进制文件流后提示下载文件 调用的js方法 ...

  2. zone.js - 暴力之美

    在ng2的开发过程中,Angular团队为我们带来了一个新的库 – zone.js.zone.js的设计灵感来源于Dart语言,它描述JavaScript执行过程的上下文,可以在异步任务之间进行持久性 ...

  3. 【JS】heatmap.js v1.0 到 v2.0,详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

  4. Tween.js的使用示例

    可参考:http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html 官方文档:https://github.com/tweenjs ...

  5. tween.js

     简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...

  6. 转载 r.js打包经验

    例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</tit ...

  7. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  8. box2d.js

    https://github.com/kripken/box2d.js/ Demo: http://kripken.github.io/box2d.js/webgl_demo/box2d.html 演 ...

  9. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

随机推荐

  1. 深入理解最强桌面地图控件GMAP.NET ---离线地图

    enjoyeclipse 深入理解最强桌面地图控件GMAP.NET ---离线地图 这章会介绍GMAP.NET的核心功能之一:离线地图.这个功能可以满足很多政府项目.保密项目.或者由于种种原因不能上网 ...

  2. std::string

    /************************************************************************* > File Name: string.cp ...

  3. hrbustoj 2013 Play Game 2(博弈)

    注释在代码里 /* 1.若输入2 ~ 9 ,因为Stan 是先手,所以Stan 必胜 2.若输入10~18 ,因为Ollie 是后手,不管第一次Stan 乘的是什么,Stan肯定在 2 ~ 9 之间, ...

  4. HTTPS连接前的几毫秒发生了什么?

    原文:http://blog.jobbole.com/48369/ 提示:英文原文写于2009年,当时的Firefox和最新版的Firefox,界面也有很大改动.以下是正文. 花了数小时阅读了如潮的好 ...

  5. PAT (Advanced Level) 1016. Phone Bills (25)

    简单模拟题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm& ...

  6. python2.7 与 go1.2简单性能比较

    过完年刚上班,项目还没有开始,对于即将到来的项目,想尝试是否可以找到一个开发效率接近python,运行效率接近静态语言的编程语言,选择基本就是scala和go,公司的技术组成基本都是c派的,scala ...

  7. spring事务的传播性的理解

    来自至顶网的文章 http://developer.zdnet.com.cn/2007/0521/402066.shtml

  8. [iOS] 响应式编程开发-ReactiveCocoa(一)

    什么是响应式编程 响应式编程是一种面向数据流和变化传播的编程范式.这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播. 例如,在命令式编程环境中 ...

  9. iOS 的三种自建证书方法https请求相关配置

    如果你的app服务端安装的是SLL颁发的CA,可以使用系统方法直接实现信任SSL证书,关于Apple对SSL证书的要求请参考:苹果官方文档CertKeyTrustProgGuide 这种方式不需要在B ...

  10. isKindOfClass,isMemberOfClass使用备忘

    isMemberOfClass 判断是否是属于这类的实例isKindOfClass 判断是否是这个类或者这个类的子类的实例 if ([teacher isKindOfClass:[Teacher cl ...