這里是介紹HTML5文件處理的第二部分，之前已經介紹過了基礎的FileAPI，接下來是如何通過JS創造文件的部分。我們稱之為FileWriterAPI。

需要提前解釋的是，FileWriterAPI不是一個可以“獨立”存在的規范，它強烈的依賴于FileAPI和即將介紹的FileSystemAPI。FileAPI是最基礎的接口這毋庸置疑，而之所以先于FileSystemAPI介紹FileWriterAPI，是因為FileSystemAPI是一套更龐大的接口設計集合，FileWriterAPI相比之下相對簡單，可以算作是FileSystemAPI也用得到的一部分基礎，提前介紹給大家。

總覽

這部分一共有三大接口：

* BlobBuilder接口：創建Blob

* FileSaver接口：提供一些列方法和事件監聽方式，代表一個保存文件的過程

* FileWriter接口：是從FileSaver擴展來的，提供更豐富的輸出選擇

需要注意的是，FileSaver和FileWriter是不能通過接口指定要保存或要寫入的文件的，它們都是對象創建時就已經確定的并且不可更改。同時FileSaver更是不提供控制寫入什么內容的接口，要寫入的內容也是對象創建時就已經確定的并且不可更改的;而FileWriter可以通過接口控制要寫入的內容。

接口描述

同樣的，這3個接口其實并不復雜，也很好理解(同樣的，接口中的“#Foo”表示任意Foo類型的對象)：

BlobBuilder接口

#BlobBuilder.getBlob([contentType]) // 返回目前已放入的所有Blob數據構成的對象  
#BlobBuilder.append(text[, contentType]) // 放入文本數據  
#BlobBuilder.append(data) // 放入數據(Blob或ArrayBugger) 

FileSaver接口

#FileSaver.abort() // 中斷保存操作  
#FileSaver.readyState // 保存工作的狀態(DONE、INIT、WRITING)  
#FileSaver.error // 最后一次出錯的錯誤信息  
#FileSaver.onwritestart // 寫入操作開始時觸發  
#FileSaver.onwrite // 寫入操作成功時觸發  
#FileSaver.onwriteend // 寫入操作完成時觸發(不管成功還是失敗)  
#FileSaver.onprogress // 寫入操作過程中觸發  
#FileSaver.onabort // 寫入操作被中斷時觸發  
#FileSaver.onerror // 寫入操作失敗時觸發 

FileWriter接口

#FileWriter.position // 當前寫入操作所處的位置  
#FileWriter.length // 文件長度(或在無權讀取文件信息的情況下返回已寫入的長度)  
#FileWriter.write(blob) // 在position處寫入blob數據  
#FileWriter.seek(offset) // 設置position屬性為offset  
#FileWriter.truncate(size) // 在size處截斷文件  
#FileWriter.abort() // 繼承自FileSaver  
#FileWriter.readyState // 繼承自FileSaver  
#FileWriter.error // 繼承自FileSaver  
#FileWriter.onwritestart // 繼承自FileSaver  
#FileWriter.onwrite // 繼承自FileSaver  
#FileWriter.onwriteend // 繼承自FileSaver  
#FileWriter.onprogress // 繼承自FileSaver  
#FileWriter.onabort // 繼承自FileSaver  
#FileWriter.onerror // 繼承自FileSaver 

代碼示例

舉例一：創建Blob對象

var blobBuilder = new BlobBuilder(); // 創建BlobBuilder對象  
blobBuilder.append("我今天只說三句話；"); // 連續放入文本  
blobBuilder.append("包括這一句；");  
blobBuilder.append("我的話完了。");  
 
var url = window.URL.createObjectURL(blobBuilder.getBlob()); // 返回Blob對象并以此創建URL  
window.open(url); // 通過URL打開這個Blob對象 

舉例二：使用FileWriter

fileEntry.createWriter(function (fileWriter) {  
    fileWriter.write(blobBuilder.getBlob()); // 返回Blob對象并通過fileWriter寫入  
    fileWriter.onwriteend = function () {...}; // 綁定寫入操作完成后的事件  
}); 

這里需要注意的是：

1.在不同的瀏覽器下，BlobBuilder和window.URL依然存在著不同的前綴，比如webkit下的接口分別為WebKitBlobBuilder和webkitURL;

2.這里出現了一個陌生的對象fileEntry和陌生的方法createWriter，這正是接下來要介紹的一套比較復雜的API：FileSystemAPI的一部分內容。想弄清楚fileWriter具體運行的環境，還得繼續學習，不過拋開外部環境的形成過程，fileWriter的用法應該可以體會到了;

3.FileSaver還沒有用得到的地方，畢竟標準還沒有最終形成，也許他將來某一天，借助其它規范的優勢，搖身一變，就用在“另存為對話框”之類的地方了。

以上就是對FileWriterAPI的介紹，緊接著就是FileSystemAPI了，屆時HTML5所有文件操作的神秘面紗都會被揭開。

原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2356045

【編輯推薦】

1. HTML 5中的文件處理之FileAPI
2. 淺析IndexedDB存數結構
3. IndexedDB的JS接口設計詳解
4. 調試IndexedDB應用程序
5. 基于Firefox 10的IndexedDB實例演示