JavaScript 利用 FileReader 讀取文字檔

過去於瀏覽器介面上,你只能透過 file 型態的 <input > 標籤,提供使用者選取檔案的功能,而現在,利用 HTML5 支援的 API 讀取檔案非常容易,這一篇來看相關的實作。考慮以下的畫面:


按一下選取要讀取的文字檔案,開啟之後的畫面如下:


畫面的下方出現了指定的檔案,也就是「文案.txt」這個文字檔案的內容。

要建立以上讀取檔案的功能,你需要FileReader,這個物件提供了數個讀取檔案的方法,其中最簡單的便是readAsText() ,它會取得指定的檔案內容並且以純文字的格式回傳。

配置如下的 HTML 畫面內容:

<body>
    <p> <input id="myfile"  type="file"     /></p>
    <textarea  id="fileContent" cols="68" rows="10"  ></textarea>
</body>

在網頁一開始載入時,為其中的 myfile 控制項,設定 onchange 屬性為 readFile() 函式,如此一來便能在使用者選取檔案完成之後,讀取其內容:

window.onload = function () {
    document.getElementById('myfile').onchange = readFile;
};

現在建立 readFile() 函式如下:

function readFile() {
    file = this.files[0];
    var fReader = new FileReader();           
    fReader.onload = function (event) {
        document.getElementById('fileContent').value = event.target.result;
    };
    fReader.readAsText(file);
}

其中取得使用者選取的檔案 file ,然後建立一個 FileReader 物件 fReader 。

接下來是要特別注意的地方,這裏透過非同步的方式讀取檔案內容,因此先設定 fReader 物件的 onload 事件屬性,於讀取完成後要執行的工作,透過其回傳參數 event.target.result 取得讀取的內容,將其顯示在畫面上的多行文字方塊中。

最後正式調用 readAsText() 方法,並且以所要讀取的 file 物件為參數傳入。

P.S. 本文擷取《HTML5從零開始》一書第九章「網頁資料儲存」部份內容,以下書籍頁可以取得全書完整範例檔案內容。

HTML5從零開始
http://www.kangting.tw/2013/07/html5.html



沒有留言: