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

按一下選取要讀取的文字檔案,開啟之後的畫面如下:
畫面的下方出現了指定的檔案,也就是「文案.txt」這個文字檔案的內容。
要建立以上讀取檔案的功能,你需要FileReader,這個物件提供了數個讀取檔案的方法,其中最簡單的便是readAsText() ,它會取得指定的檔案內容並且以純文字的格式回傳。
配置如下的 HTML 畫面內容:
在網頁一開始載入時,為其中的 myfile 控制項,設定 onchange 屬性為 readFile() 函式,如此一來便能在使用者選取檔案完成之後,讀取其內容:
現在建立 readFile() 函式如下:
其中取得使用者選取的檔案 file ,然後建立一個 FileReader 物件 fReader 。
接下來是要特別注意的地方,這裏透過非同步的方式讀取檔案內容,因此先設定 fReader 物件的 onload 事件屬性,於讀取完成後要執行的工作,透過其回傳參數 event.target.result 取得讀取的內容,將其顯示在畫面上的多行文字方塊中。
最後正式調用 readAsText() 方法,並且以所要讀取的 file 物件為參數傳入。
P.S. 本文擷取《HTML5從零開始》一書第九章「網頁資料儲存」部份內容,以下書籍頁可以取得全書完整範例檔案內容。
《HTML5從零開始》
http://www.kangting.tw/2013/07/html5.html

按一下選取要讀取的文字檔案,開啟之後的畫面如下:
畫面的下方出現了指定的檔案,也就是「文案.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
沒有留言:
張貼留言