1. 程式人生 > >html5的FileReader文件讀取

html5的FileReader文件讀取

圖片文件 支持 sda onerror utf 裏的 ade 16px sbin

此文引用:http://blog.csdn.net/jackfrued/article/details/8967667

一:FileReader

FileReader是API重要成員用於讀取文件,FileReader接口提供了讀取文件的方法和包含讀取事件結果的事件模型;

二:FileReader事件的方法

FileReader 的實例擁有 4 個方法,其中 3 個用以讀取文件,另一個用來中斷讀取

1: readAsDataURL  參數file  將文件讀取為 DataURL

這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實質就是 Data URL,Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件通常是指圖像與 html 等格式的文件。

2: readAsText  參數 file [encoding]  將文件讀取為文本

該方法有兩個參數,其中第二個參數是文本的編碼方式,默認值為 UTF-8。這個方法非常容易理解,將文件以文本方式讀取,讀取的結果即是這個文本文件中的內容。

3: readAsBinaryString  參數 file   將文件讀取為二進制碼

該方法將文件讀取為二進制字符串,通常我們將它傳送到後端,後端可以通過這段字符串存儲文件。

4: abort   參數 none  中斷讀取

註意:無論讀取成功或失敗,方法並不會返回讀取結果,這一結果存儲在 result屬性中。

三:處理事件

FileReader 包含了一套完整的事件模型,用於捕獲讀取文件時的狀態,下面這個表格歸納了這些事件。

  • onabort  中斷時觸發
  • onerror  出錯時觸發
  • onload  文件讀取成功完成時觸發
  • onloadend   讀取完成觸發,無論成功或失敗
  • onloadstart  讀取開始時觸發
  • onprogress  讀取中

文件一旦開始讀取,無論成功或失敗,實例的 result 屬性都會被填充。如果讀取失敗,則 result 的值為 null ,否則即是讀取的結果,絕大多數的程序都會在成功讀取文件的時候,抓取這個值。

四:實例應用

1.檢測瀏覽器對FileReader的支持  

  if(window.FileReader) {

   var fr = new FileReader();

// add your code here

  } else {

  alert("Not supported by your browser!");

  }

2. 如果要限定上傳文件的類型,可以通過文件選擇器獲取文件對象並通過type屬性來檢查文件類型(判斷圖片文件)

  if(!/image\/\w+/.test(file.type)){

   alert("請確保文件為圖像類型"); return false;

  }

不難發現這個檢測是基於正則表達式的,因此可以進行各種復雜的匹配,非常有用。

  <div class=‘container‘>
    <input type="file" multiple id="selectFile" />
    <div class=‘iconBox‘></div>
  </div>

  <script type="text/javascript">
    document.querySelector(‘input[type=file]‘).onchange = function (){

      // 1 創建文件讀取對象 實例化一個讀取器
      var reader = new FileReader();

      // 0 通過當前的file標簽 獲取選擇的文件信息
      console.log(this.files);

      // 2 調用該對象的方法 讀取文件 文件
      // 讀取文件是一個耗時操作 不一定什麽時候讀取完畢
      reader.readAsDataURL(this.files[0]);
      // reader.readAsDataURL(f);

      // 3 添加事件 當文件過大,不能立即讀完 通過事件監聽進度
      // 耗時操作 通過事件的方式進行註冊 並且回調
      reader.onload = function (){
        // 使用讀取完畢的文件
        console.log(reader.result);
        //使用返回的結果 即可
        document.querySelector(‘.iconBox‘).style.background = ‘url(‘+ reader.result+‘) no-repeat center/cover‘;
      }
    }
</script>

html5的FileReader文件讀取