Blob

Blob 简介

Blob 是对大数据块的不透明引用或句柄，名字来源于 SQL 数据库，表示「二进制大对象」。

Web 浏览器可以把 Blob 存储到内存或磁盘中，Blob 可以表示非常大的数据块，可以通过 slice() 方法将它们分割成为非常小的数据块。

Blob 本身没有什么意义，但它们为用于二进制数据的大量 JavaScript API 提供重要的数据交换机制：

使用 Blob 之前，需要先获取它：

• 支持结构性复制，所以可以通过 onmessage 事件获取
• 从客户端数据库获取
• 使用XHR2通过脚本化HTTP从Web下载
• 使用BlobBuilder对象从字符串、ArrayBuffer对象创建
• 客户端 JavaScript 的 File 对象是 Blob 的子类，File 对象就是 Blob 数据

获取到 Blob 之后，就可以对其进行操作：

• 通过 postMessage() 方法发送给其他窗口或 Worker
• 存储到客户端数据库
• 传递给 XMLHttpRequest 对象的 send() 方法，将其上传到服务器
• 使用 createObjectURL() 获取一个特殊的 blob://URL
• 使用 FileReader 对象异步将一个 Blob 内容抽取成一个字符串或 ArrayBuffer
• 可以通过文件系统 API 和 FileWriter 对象来实现将一个 Blob 写入到一个本地文件中

文件作为 Blob

<input type="file"> 元素的 files 属性是一个 FileList 对象，该对象是一个类数组对象，每个 File 对象就是一个 Blob。

下载 Blob

function getBlob(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = function () {
        callback(xhr.response);
    }
    xhr.send(null);
}

构造 Blob

// 创建一个新的 BlobBuilder
var bb = new BlobBuilder();
bb.append("这是一个Blob");
bb.append("\0");
var ab = new ArrayBuffer(4*10);
var dv = new DataView(ab);
for (var i = 0; i < 10; i++)
    dv.setInt32(i * 4, i);
bb.append(ab);
// 从builder中获取Blob
var blob = bb.getBlob("x-optional/mime-type-here");

Blob URL

使用 createObjectURL() 函数可以创建一个 Blob URL：

var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
    (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||
    window.createObjectURL;

Blob URL 只有在同源文档中才是有效的，Blob URL 也不是长期有效的，一旦用户关闭或者离开包含创建 Blob URL脚本的文档，该 Blob URL 就失效了，也不能将其存储到本地。

可以通过 URL.revokeObjectURL() 方法手动让 Blob URL 失效。

读取 Blob

FileReader 对象允许访问 Blob 中的字符或字节，可以将其视作 BlobBuilder 对应的一个对象，由于 Blob 可能会是存储在文件系统中的大对象，因此读取它们的 API 是异步的，要使用 FileReader 首先要通过 FileReader() 构造函数创建一个实例，然后定义一个事件处理程序，接下来还要将读取的 Blob 传递给下面四个方法之一：

• readAsText()
• readAsArrayBuffer()
• readAsDataURL()
• readAsBinaryString()

读取 Blob 的时候会更新 readyState 属性，result 属性则包含读取的结果。

以下是一个 readAsText() 的使用示例：

<script>
    function readfile(f) {
        var reader = new FileReader();
        reader.readAsText(f);
        reader.onload = function () {
            var text = reader.result;
            var out = document.getElementById("output");
            out.innerHTML = "";
            out.appendChild(document.createTextNode(text));
        };
        reader.onerror = function (e) {
            console.log("Error", e);
        };
    }
</script>
<input type="file" onchange="readfile(this.files[0])"/>