javascript 上传文件相关 Blob 对象

这一系列文章都讲述的是关于使用 JavaScript 操作文件相关的知识，其中最重要的是 File 对象，而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。

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

Slicing （分割）

通过 Blob 对象可以做的一件有趣的事情就是可以创建一个子 Blob 对象，其实就是可以将其分割（file 对象也可以）。由于每个 Blob 对象都是通过指针指向数据的而不是指向数据本身，因此可以快速的创建指向其他子部分的新的 Blob 对象，这里就需要使用 slice() 方法了。是不是和 JavaScript 的 slice() 方法很象，其实差不多。

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

不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他浏览器则正常的方式 slice() 。重写的兼容各个浏览器的例子如下：

1 2 3 4 5 6 7 8 9 10 11 12

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 对象和原始的是独立存在的。例如，Flickr 的工程师就使用此方法将照片中的需要使用的 exif 信息截取出来，而不是等到其传到服务器上之后，才处理的，并且一旦选择要上传照片，则同时传输文件数据和 Exif 数据，这样几乎就可以在上传照片的时候同时显示照片的信息了。

使用旧方法创建 Blob 对象

当 File 对象开始出现在浏览器中的时候，开发者们意识到 Blob 对象太强大了，都想可以在用户不干预的情况下，创建 Blob 对象，毕竟任何数据都可以用 Blob 对象表示，不用非要和文件产生关系。通过 BlobBuilder 创建一个包含有特定数据的 Blob 对象，然后浏览器快速响应即可。（不过目前其还不统一，Firefox:MozBlobBuilder, Internet Explorer 10:MSBlobBuilder,Chrome:WebKitBlobBuilder）。

例子：

1 2 3

var builder = new BlobBuilder(); builder.append("Hello world!"); var blob = builder.getBlob("text/plain");

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

并且 BlobBuilder() 还可以处理动态数据，例如 worker 中的数据等，这里就不翻译了。

使用新方法创建 Blob 对象

因为开发者一直想要能够直接创建 Blob 对象，因此浏览器实现了 BlobBuilder(); Blob 作为构造函数而存在，而且，此构造函数也已经被作为标准了，其也是今后创建 Blob 对象的方式。

Blob()--构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

type -- MIME 的类型。

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

例子：

1	var blob = new Blob(["Hello world!"], { type: "text/plain" });

可以看到，此方法比 BlobBuilder() 简单多了。

但是，此 Blob 构造函数还没有被一些浏览器实现，目前只有某些版本的 Chrome 和 Firefox 实现了。而且剩余的浏览器也没有确定什么时候实现，但是其现在作为 File API 的一部分，将来应该会被统一实现的。

转载于:https://www.cnblogs.com/descusr/archive/2013/05/23/3095126.html