HTML 5中的文件處理之File Writer API
這里是介紹HTML5文件處理的第二部分，之前已經(jīng)介紹過了基礎(chǔ)的FileAPI，接下來是如何通過JS創(chuàng)造文件的部分。我們稱之為FileWriterAPI。
需要提前解釋的是，F(xiàn)ileWriterAPI不是一個可以“獨(dú)立”存在的規(guī)范，它強(qiáng)烈的依賴于FileAPI和即將介紹的FileSystemAPI。FileAPI是最基礎(chǔ)的接口這毋庸置疑，而之所以先于FileSystemAPI介紹FileWriterAPI，是因?yàn)镕ileSystemAPI是一套更龐大的接口設(shè)計集合，F(xiàn)ileWriterAPI相比之下相對簡單，可以算作是FileSystemAPI也用得到的一部分基礎(chǔ)，提前介紹給大家。
總覽
這部分一共有三大接口：
* BlobBuilder接口：創(chuàng)建Blob
* FileSaver接口：提供一些列方法和事件監(jiān)聽方式，代表一個保存文件的過程
* FileWriter接口：是從FileSaver擴(kuò)展來的，提供更豐富的輸出選擇
需要注意的是，F(xiàn)ileSaver和FileWriter是不能通過接口指定要保存或要寫入的文件的，它們都是對象創(chuàng)建時就已經(jīng)確定的并且不可更改。同時FileSaver更是不提供控制寫入什么內(nèi)容的接口，要寫入的內(nèi)容也是對象創(chuàng)建時就已經(jīng)確定的并且不可更改的;而FileWriter可以通過接口控制要寫入的內(nèi)容。
接口描述
同樣的，這3個接口其實(shí)并不復(fù)雜，也很好理解(同樣的，接口中的“#Foo”表示任意Foo類型的對象)：
BlobBuilder接口
- #BlobBuilder.getBlob([contentType]) // 返回目前已放入的所有Blob數(shù)據(jù)構(gòu)成的對象
- #BlobBuilder.append(text[, contentType]) // 放入文本數(shù)據(jù)
- #BlobBuilder.append(data) // 放入數(shù)據(jù)(Blob或ArrayBugger)
FileSaver接口
- #FileSaver.abort() // 中斷保存操作
- #FileSaver.readyState // 保存工作的狀態(tài)(DONE、INIT、WRITING)
- #FileSaver.error // 最后一次出錯的錯誤信息
- #FileSaver.onwritestart // 寫入操作開始時觸發(fā)
- #FileSaver.onwrite // 寫入操作成功時觸發(fā)
- #FileSaver.onwriteend // 寫入操作完成時觸發(fā)(不管成功還是失敗)
- #FileSaver.onprogress // 寫入操作過程中觸發(fā)
- #FileSaver.onabort // 寫入操作被中斷時觸發(fā)
- #FileSaver.onerror // 寫入操作失敗時觸發(fā)
FileWriter接口
- #FileWriter.position // 當(dāng)前寫入操作所處的位置
- #FileWriter.length // 文件長度(或在無權(quán)讀取文件信息的情況下返回已寫入的長度)
- #FileWriter.write(blob) // 在position處寫入blob數(shù)據(jù)
- #FileWriter.seek(offset) // 設(shè)置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
代碼示例
舉例一：創(chuàng)建Blob對象
- var blobBuilder = new BlobBuilder(); // 創(chuàng)建BlobBuilder對象
- blobBuilder.append("我今天只說三句話；"); // 連續(xù)放入文本
- blobBuilder.append("包括這一句；");
- blobBuilder.append("我的話完了。");
- var url = window.URL.createObjectURL(blobBuilder.getBlob()); // 返回Blob對象并以此創(chuàng)建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.這里出現(xiàn)了一個陌生的對象fileEntry和陌生的方法createWriter，這正是接下來要介紹的一套比較復(fù)雜的API：FileSystemAPI的一部分內(nèi)容。想弄清楚fileWriter具體運(yùn)行的環(huán)境，還得繼續(xù)學(xué)習(xí)，不過拋開外部環(huán)境的形成過程，fileWriter的用法應(yīng)該可以體會到了;
3.FileSaver還沒有用得到的地方，畢竟標(biāo)準(zhǔn)還沒有最終形成，也許他將來某一天，借助其它規(guī)范的優(yōu)勢，搖身一變，就用在“另存為對話框”之類的地方了。
以上就是對FileWriterAPI的介紹，緊接著就是FileSystemAPI了，屆時HTML5所有文件操作的神秘面紗都會被揭開。
原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2356045
【編輯推薦】
