HTML5 表單元件：client端客戶端電腦，開啟純文字檔案

(1).開啟檔案元件

<input id="file01" type="file" onchange="show02(this)"/>

(2).取得檔案參數

filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;
注意：可以複選

(3).讀取純文字檔的內容

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

(4).使用FileReader物件讀取檔案

若要讀取檔案中的內容，可以利用FileReader物件，檔案讀取的動作採非同步方式。要讀取檔案可以利用幾個方法：

• readAsText：以文字方式讀檔案內容，放到result屬性，預設使用的編碼方式是「UTF-8」。
• readAsDataURL：讀取到的內容會編碼成data URL，放到result屬性。
• readAsArrayBuffer：result屬性會包含一個ArrayBuffer物件。
• readAsBinaryString：以二進位方式讀檔案內容，放到result屬性。

(4).File API功能

File API 在 HTML5 中屬於基礎功能之一，它可以在本地端讀入二進位檔案，並且轉換成 Data URI (文字格式加上 base64 編碼字串的 URL，只要變成了文字樣式，再配合 DOM 的處理，就能將它塞到 DIV，Hidden Field 或其他的地方 (ex: localstorage)，也可以將它指定給 img 來顯示等等，用途很廣。

<input type=”file” /> 和 File API 連接起來，

使用者可以選擇多個檔案，而讀入的檔案在 DOM 內會變成一個稱為 Blob 的項目，我們可以透過 file 的 DOM 物件來瀏覽檔案的清單

Blob 物件有三個屬性可以存取：

• name，取得檔案名稱，如果需要做副檔名檢查，可利用它。
• size，取得檔案大小 (bytes)。
• type，取得檔案的 MIME 型別 (若無法對應會傳回空白)。

如果要上傳的話，我們還需要讀入檔案，這是 HTML5 File API 最厲害的地方，它可以將二進位檔案讀入，但基於安全的理由，讀入的資料會被轉成字串 (base64)，而不會讓 JavaScript 去操作二進位資料。讀取資料的物件稱為 FileReader，擁有下列方法：

• abort()：取消讀取。
• readAsArrayBuffer()：讀取檔案，並傳回一個 array buffer 物件，這個物件由 JavaScript 支援。
• readAsBinaryString()：讀取檔案，並傳回一個 binary string 字串。
• readAsDataURL()：讀取檔案，並傳回一個 Data URI 格式的字串。
• readAsText()：讀取檔案，並傳回文字內容，可依傳入的編碼做處理。

 請注意，在 FileReader 裡面，所有的讀取動作都是非同步的，所以在呼叫 read 方法之前，必須要先掛載一個 onload 的事件常式，以擷取讀取的結果，在事件參數中，使用 result 屬性來取得結果

使用 readAsDataURL() 讀出的檔案內容是這樣：

data:application/vnd.openxmlformats-officedocument.presentationml.presentation  ;base64,  UEsDBBQABgAIAAAAIQBa...

伺服端的部份則只要可以解出 base64 的資料就可以了，ASP.NET 可用 Convert.FromBase64String()，將 base64 的部份拆出來後直接轉，但要注意的是 Data URI 會將 “+” 變成空白字元 (傳輸時的相容性)，所以在解碼前要先將所有的空白字元轉換成 “+”，否則會解碼失敗。

除了 onload 以外，FileReader 還有下列事件可用：

• onabort：在呼叫 abort() 時引發。
• onerror：在讀檔失敗時引發。
• onloadend：在讀檔工作完成時引發，不論成功或失敗。
• onloadstart：在讀檔開始時引發。
• onprogress：在讀檔之間回報進度。

FileReader屬性
error            唯讀 讀取文件時發生的錯誤
readyState  唯讀 顯示目前FileReader狀態 EMPTY==0 LOADING==1 DONE==2
result           唯讀 讀取到的文件内容.該屬性只在讀取操作完後才有效,數據格式依讀取操作方式而不同

FileReader 包含四個非同步讀取文件的方法:

• FileReader.readAsBinaryString(Blob|File)

• FileReader.readAsText(Blob|File, opt_encoding)

• FileReader.readAsArrayBuffer(Blob|File)

• FileReader.readAsDataURL(Blob|File)