原文 http://blog.csdn.net/oscar999/article/details/36373183

什么是Blob?

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 。

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

2. 新方法创建Blob 对象

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

type -- MIME 的类型。

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

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

Blob的应用

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

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!");
}
}

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

具体可以参考:

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

JS 之Blob 对象类型的更多相关文章

  1. js中判断对象类型的几种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  2. js中的对象类型的基本操作

    示例 /** * 对象属于一种复合数据类型,在对象中可以保存多个不同数据类型的属性 * 对象的分类: * 1.内建对象 * - 由ES标准定义的对象,在任何ES的实现中都可以使用,比如:Math, * ...

  3. js对已经对象类型进行类型辨别

    typeof() Object.prototype.toString.call(data)

  4. js 判断l对象类型

    var obj = {}; obj.isObject = function (obj) { return Object.prototype.toString.call(obj) == '[object ...

  5. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  6. JS判断对象类型

    对于确定JS内置对象类型,JS提供了typeof运算符,该运算符得到的结果为以下6种:number,boolean,string,function,object,undefined.不过对绝大多数对象 ...

  7. js中推断对象详细类型

    大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...

  8. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

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

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

随机推荐

  1. jmeter 运行多个sql

    1.关键就是"allowMultiQueries=true" database url:jdbc:mysql://127.0.0.1:3306/api?useUnicode=tru ...

  2. 一、基于hadoop的nginx访问日志分析---解析日志篇

    前一阵子,搭建了ELK日志分析平台,用着挺爽的,再也不用给开发拉各种日志,节省了很多时间. 这篇博文是介绍用python代码实现日志分析的,用MRJob实现hadoop上的mapreduce,可以直接 ...

  3. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  4. 海思h264解码库

    海思的dll,解码h264  解码后转出yuv12 dll自己百度下载  hi_h264dec.dll   hi_h264dec_w.dll   调用方法: if (H264Dec.Hi264DecA ...

  5. Linux 命令收集

    http://www.cnblogs.com/tzhangofseu/archive/2011/12/17/2290955.html vim :r filename :sh  enter shell ...

  6. C#学习笔记

    1.C#中[],List,Array,ArrayList的区别 [] 是针对特定类型.固定长度的. List 是针对特定类型.任意长度的. Array 是针对任意类型.固定长度的. ArrayList ...

  7. [Python] Python学习笔记之常用模块总结[持续更新...]

    作为一种极其简单的编程语言,Python目前成为了最炙手可热的几种语言之一.它不仅简单易学,而且它还为用户提供了各种各样的模块,功能强大,无所不能.有利必有弊,学习Python同样有困扰,其中之一就是 ...

  8. PHP如何判断一个gif图片是否为动画?

    首先想到的是用getimagesize()看看type,发现都是gif. 然后想gif动画是gif89格式的,发现文件开头是gif89,但是很多透明图片也是用的gif89格式. 看来必须分析文件的祯了 ...

  9. mysql连接超时与jndi数据源配置

    昨天有运营说添加活动不能用了,我就看了一下后台日志,发现访问数据库是报错: at java.lang.Thread.run(Thread.java:722) Caused by: com.mysql. ...

  10. java基础 字符串 “==” 和 “equals” 比较

    demo: public class TestStringEquals { public static void main(String[] args) { String a = "test ...