JavaScript中讀取並儲存檔案實例_javascript技巧

話說今天只是粗略瀏覽了一下Proxy SwitchySharp的源碼，就收穫了不少東西，其中就包括本文要介紹的讀取和保存文件。

因為Google還不提供同步外掛資料的功能，所以匯入和匯出外掛程式配置就必須和文件打交道了。而出於安全原因，只有IE才提供存取文件的API；但隨著HTML 5的到來，其他瀏覽器也紛紛支援了。

首先說讀取文件。 W3C提供了一些File API，其中最重要的是FileReader這個類別。

先列出需要用到的HTML標籤：

複製程式碼 程式碼如下:

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

這個FileList物件類似一個數組，可以知道檔案的數目，而它的元素就是File物件了。
從這個File物件可以取得name、size、lastModifiedDate和type等屬性。
把這個File物件傳給FileReader物件的讀取方法，就能讀取檔案了。

FileReader共有4種讀取方法：

1.readAsArrayBuffer(file)：將檔案讀取為ArrayBuffer。
2.readAsBinaryString(file)：將檔案讀取為二進位字串
3.readAsDataURL(file)：將檔案讀取為Data URL
4.readAsText(file, [encoding])：將文件讀取為文本，encoding缺省值為'UTF-8'
此外，abort()方法可以停止讀取文件。

FileReader物件在讀取檔案後，還需要處理。為了不阻塞當前線程，API採用了事件模型，可以註冊這些事件：

1.onabort：中斷時觸發
2.onerror：出錯時觸發
3.onload：檔案成功讀取完畢時觸發
4.onloadend：檔案讀取完畢時觸發，無論是否失敗
5.onloadstart：檔案開始讀取時觸發
6.onprogress：當檔案讀取時，週期性地觸發

有了這些方法以後，就可以處理文件了。

先來試試讀取文字檔：

複製程式碼 程式碼如下:

f .length) {

        var file = files[0];
        var reader = new File.          reader. onload = function() {
                $('

' this.result '

').appendTo('body       reader.readAsText(file);
        }
    }
}




這裡的this.result其實就是reader.result，也就是讀取出來的檔案內容。
測試一下你會發現這個檔案的內容被加入到網頁中了。如果是用Chrome的話，必須把網頁放在伺服器或插件裡，file協定下會失敗。

再來試試圖片，因為瀏覽器可以直接顯示Data URI協定的圖片，所以這次就加入圖片：

複製程式碼

程式碼如下:

function handleFiles(files) {
    if (files.length) {
              if (/ text/w /.test(file.type)) {
            reader.onload = function() {
       );
            }
               }
                        reader.onload = function() {
                $('').appendTo('body');
   .readAsDataURL(file);
        }
    }
}



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

複製程式碼

程式碼如下:

這樣handleFiles()裡就需要遍歷處理files了。

如果只想讀取部分資料的話，File物件還有webkitSlice()或mozSlice()方法，用來產生Blob物件。這個物件可以和File物件一樣被FileReader讀取。這2個方法接收3個參數：第1個參數是起始位置；第2個是結束位置，省略時則讀到文件結尾；第3個是content type。 範例可以參考《Reading local files in JavaScript》。

當然，除了匯入資料和顯示檔案以外，它還可以用來做AJAX上傳，程式碼可以參考《Using files from web applications》。

接下來說要保存文件。

實際上File API: Writer提供了4個接口，但目前只有部分瀏覽器（Chrome 8 和Firefox 4 ）實作了BlobBuilder，其餘介面都不可用。

對於不支援的瀏覽器，可以使用BlobBuilder.js和FileSaver.js來獲得支援。

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

BlobBuilder可以建立一個Blob物件。把這個Blob物件傳遞給URL.createObjectURL()方法，就可以拿到一個object URL。而這個object URL就是這個Blob物件的下載位址。
拿到下載位址後，建立一個a元素，將下載位址賦值給href屬性，檔案名稱賦值給download屬性（Chrome 14 支援）。
然後再建立一個click事件，交給這個a元素處理，就會導致瀏覽器開始下載這個Blob物件了。

最後，用URL.revokeObjectURL()來釋放這個object URL，通知瀏覽器可以不必繼續引用這個文件了。

以下是一段化簡的程式碼：

複製程式碼

程式碼如下: 程式碼如下:

var🎜>var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;

function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
;強制下載，而非在瀏覽器中開啟
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
  
    }

    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');    save_link.download = filename;

    var event = document.createEvent('MouseEvents');

    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}

var bb = new BlobBuilder;

bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world. txt');

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