理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。

以上为MDN上官方口吻的解释。实际上，Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。

在实际Web应用中，Blob更多是图片二进制形式的上传与下载，虽然其可以实现几乎任意文件的二进制传输。

举个例子，使用Blob从服务器上GET某mm的图片（只要关心标红的部分）：

var xhr = new XMLHttpRequest(); xhr.open("get", "mm1.jpg", true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { var blob = this.response; // this.response也就是请求的返回就是Blob对象 var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); // 清除释放 }; img.src = window.URL.createObjectURL(blob); eleAppend.appendChild(img); } } xhr.send();

您可以狠狠地点击这里：Blob获取图片并二进制显示demo

我们查看demo页面这个mm图片元素，会发现其URL地址既不是传统HTTP，也不是Base64 URL，而是Blob形式~如下截图示意：

这就是Blob在Web开发中非常重要的一个功能——创建Blob网址。上述代码涉及XMLHttpRequest 2一些重要知识点，以及window.URL相关技术，都是可以深入挖掘学习的部分，但，不是本文重点，以后有机会会细致阐述。

但是，并不是所有的图片都能以Blob形式请求，因为，毕竟是Ajax请求嘛，还是有一定的跨域限制。XMLHttpRequest 2虽然支持跨源资源共享(CORS)，但是，还是需要对Access-Control-Allow-Origin的设置，允许来自那个域名的这类请求，例如，允许本人的站点Blob请求你服务器上的图片资源，你可以设置：

Access-Control-Allow-Origin: http://zhangxinxu.com

要允许任何域向您提交请求，可以设置：

Access-Control-Allow-Origin: *

我们都知道CSS3的font-face属性，在Firefox浏览器下，如果字体文件跨域（包括跨子域），是显示不出来的，也是通过

Access-Control-Allow-Origin: *

设置解决。其实，本质是一样的。

由于权限原因，我的个人站点无法配置Access-Control-Allow-Origin，我测试了下，新浪微博的图片是无法二进制请求的，不过我的前东家，xiaomishu.com的图片都是可以Ajax请求并Blob显示的，悄悄告诉大家，是我当初动的手脚，(*^__^*) 嘻嘻……

Blob对象有两个属性，参见下表：

属性名

类型

描述

unsigned long long(表示可以很大的数值)

Blob对象中所包含数据的大小。字节为单位。 只读。

DOMString

一个字符串，表明该Blob对象所包含数据的MIME类型。例如，上demo图片MIME类似就是”image/jpeg“. 如果类型未知，则该值为空字符串。只读。

今天在微博上看到一个表单提交之前判断文件大小并作阻止的tip，实际上，就是使用的Blob对象的size属性。

与FormData对象类似，Blob也有一个构造函数用法。语法如下：

Blob Blob( [可选] Array parts, [可选] BlobPropertyBag properties );

例如：

var myBlob= new Blob(arrayBuffer);

其中，两个参数的含义是：