HTML5之FileReader API的使用

HTML5之FileReader API的使用

簡介

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上面的文件（或者原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。其中File對象可以是來自用戶在一個input元素上選擇文件後返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。

FileReader的構造函數

FileReader，通過new FileReader()返回一個新構造的FileReader。

FileReader的屬性和描述

屬性	訪問性	說明
FileReader.error	只讀	表示在讀取文件時發生的錯誤
FileReader.readyState	只讀	表示FileReader狀態的數字，取值如下： 常量名 值 描述 EMPTY 0 還沒有加載任何數據。 LOADING 1 數據正被加載 DONE 2 已完成全部的讀取請求
FileReader.result	只讀	文件的內容，該屬性僅僅在讀取操作完成以後纔有效，數據格式取決於使用哪種方法來啓動讀取操作。

FileReader的事件處理

FileReader繼承自EventTarget，因此所有下面的事件都可以通過addEventListener方法使用。

事件	說明
FileReader.onbort	處理abort事件。該事件在文件讀取操作被中斷時觸發。
FileReader.onerror	處理error事件。該事件在讀取操作發生錯誤時觸發。
FileReader.onload	處理load事件。該事件在讀取操作完成時觸發。
FileReader.onloadstart	處理loadstart事件。該事件在讀取操作開始時觸發。
FileReader.onloadend	處理loadend事件。該事件在讀取操作結束時（要麼成功，要麼失敗）觸發。
FileReader.onprogress	處理progress事件。該事件在讀取Blob時觸發。

FileReader的方法

方法	說明
FileReader.abort()	終止讀取操作。在返回的時候，readyState屬性爲DONE
FileReader.readAsArrayBuffer()	開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.
FileReader.readAsBinaryString()	開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。
FileReader.readAsDataURL()	開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。
FileReader.readAsText()	開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。

readAsText：方法有兩個參數，其中第二個參數是文本的編碼格式，默認值爲UTF-8。這個方法是將文件以文本方式讀取，結果是文本文件中的內容。

使用：示例（加載計算機中的圖片展示到頁面上）

<div>
    <div class="headImg">
        <input type="file" style="visibility: hidden" id ="headFile" onchange="loadImage()"/>
        <img onclick="trigerFileInput()" style="hidden;width:35%;height:85px" id="default" src="../img/timg.jpg"/>
     </div>
 </div>
 <script>
     //觸發input[type="file"]的選擇事件，打開圖片選擇窗口
     function trigerFileInput(){
       document.getElementById("headFile").click();
     }
     //加載圖片
        function loadImage(){
       var file = document.getElementById("headFile").files[0];
       var filename = file.name;
       if(/(\.png|\.jpg)$/.test(filename)){
         var reader = new FileReader();
         reader.onload = function(){
           document.getElementById("default").src=this.result;
         }
         reader.readAsDataURL(file);
       }
       else{
         alert("請選擇正確的文件");
       }
   }
 </script>