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

(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 連接起來，

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)

result 屬性將包含二進位字元串形式的 file/blob 數據。

FileReader.readAsText(Blob|File, opt_encoding)

result 屬性將包含文本字串形式的 file/blob 數據。預設UTF-8

FileReader.readAsArrayBuffer(Blob|File)

result 屬性將包含 ArrayBuffer 物件形式的 file/blob 數據。

FileReader.readAsDataURL(Blob|File)

result 屬性將包含編碼為data URL的 file/blob 數據。
data URL的格式,在維基百科的《Data URI scheme》記載了相關資訊。DataURI是一種特殊的URL格式,直接將文件內容編成一組URL字串內嵌在網頁中.
通常html文件的圖片是透過img的src屬性指向另一個圖片檔案的遠端網址URL,所以瀏覽器每下載一個圖檔就會觸發HTTP request.而我們使用FileReader產生的Data URI格式一樣也能指定給img的src屬性,因此達到頁面上即可顯示圖片內容,而不需上傳到伺服器端.
data URI的格式
data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>
(*Blob-二進位大型物件binary large object的縮寫)
FileReader事件處理程序
onabort
當讀取操作被終止時調用.
onerror
當讀取操作發生錯誤時調用.
onload
當讀取操作成功完成時調用.
onloadend
當讀取操作完成時調用,不管是成功還是失敗.該處理常式在onload或者onerror之後調用.
因此在此事件讀取文件時,需要檢查fileReader物件的readyState