過去於瀏覽器介面上，你只能透過 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
沒有留言:
張貼留言