用JavaScript讀取和儲存檔案

2011102004:52 AM16608次檢視

因為Google還不提供同步插件資料的功能，是以導入和導出插件配置就必須和檔案打交道了。而出于安全原因，隻有IE才提供通路檔案的API；但随着HTML 5的到來，其他浏覽器也紛紛支援了。

先列出需要用到的HTML标簽：

當選擇了一個檔案時，就會把包含這個檔案的清單（一個FileList對象）作為參數傳給handleFiles()函數了。

這個FileList對象類似一個數組，可以知道檔案的數目，而它的元素就是File對象了。

從這個File對象可以擷取name、size、lastModifiedDate和type等屬性。

把這個File對象傳給FileReader對象的讀取方法，就能讀取檔案了。

FileReader共有4種讀取方法：

readAsBinaryString(file)：将檔案讀取為二進制字元串

readAsText(file, [encoding])：将檔案讀取為文本，encoding預設值為'UTF-8'

此外，abort()方法可以停止讀取檔案。

FileReader對象在讀取檔案後，還需要進行處理。為了不阻塞目前線程，API采用了事件模型，可以注冊這些事件：

onabort：中斷時觸發

onerror：出錯時觸發

onload：檔案成功讀取完畢時觸發

onloadend：檔案讀取完畢時觸發，無論是否失敗

onloadstart：檔案開始讀取時觸發

onprogress：當檔案讀取時，周期性地觸發

有了這些方法以後，就可以處理檔案了。

先來試試讀取文本檔案：

這裡的this.result實際上就是reader.result，也就是讀取出來的檔案内容。

測試一下你會發現這個檔案的内容被添加到網頁中了。如果是用Chrome的話，必須把網頁放在伺服器上或插件裡，file協定下會失敗。

再來試試圖檔，因為浏覽器可以直接顯示Data URI協定的圖檔，是以這次就添加圖檔：

其實input:file控件還支援選擇多個檔案：

這樣handleFiles()裡就需要周遊處理files了。

如果隻想讀取部分資料的話，File對象還有webkitSlice()或mozSlice()方法，用于生成Blob對象。這個對象可以和File對象一樣被FileReader讀取。這2個方法接收3個參數：第1個參數是起始位置；第2個是結束位置，省略時則讀到檔案結尾；第3個是content type。

接下來說儲存檔案。

我研究了一下，發現了其中的奧秘。

拿到下載下傳位址後，建立一個a元素，将下載下傳位址指派給href屬性，檔案名指派給download屬性（Chrome 14+支援）。

然後再建立一個click事件，交給這個a元素處理，就會導緻浏覽器開始下載下傳這個Blob對象了。

下面就是一段化簡的代碼：

測試時會提示儲存一個文本檔案。Chrome需要把網頁放在伺服器上或插件裡。