2016年8月14日 星期日

使用FileReader讀取file資料 - javascript

FileReader是HTML5的新Javascript物件,可以用來讀取input type="file"的file資料(其實就是FileList對像),其實不只input type="file"的FileList對像,還可以讀取許多不同的資料來原,例如Blob對像、拖拉產生的DataTransfer對像等。

今天要來實作一個簡單的圖片預覽器,須求如下:

  1. 選擇檔案後,如果是可顯示的圖片檔,會在下面的"圖片預覽"顯示出圖片。
  2. 如果沒有選擇檔案(例如取消了檔案選取),則"圖片預覽"的圖片會被清掉。
  3. 為了簡單起見,這裡不檢查file來源是不是圖片檔。


程式實作如下:
說明:

  1. FileReader.readAsDataURL(source)可以輸入file source並得到一串當下可用的URL,
    型式為 dtat:..........,存在FileReader.result中
    還有其他的read函式可用,例如:
    readAsArrayBuffer()、readAsBinaryString()、readAsText()
  2. FileReader在讀取完後會觸發load事件,還有其他的事件可用,例如:
    onabort:當讀取操作被中止時調用.
    onerror:當讀取操作發生錯誤時調用.
    onload:當讀取操作成功完成時調用.
    onloadend:當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload或者onerror之后调用.
    onloadstart:當讀取操作將要開始之前調用.
    onprogress:在讀取數據過程中周期性調用.
  3. FileReader:
    FileReader.readyState代表資料的讀取狀態,總共有三個值:
    FileReader.EMPTY = 0:還沒有加載任何數據.
    FileReader.LOADING = 1:數據正在被加載.
    FileReader.DONE = 2:已完成全部的讀取請求.

源碼(怕JsFiddle有問題):
html:

圖片預覽:
javascript:
var fileUploader = document.getElementById("fileUploader");
var imageView = document.getElementById("imageView");
//用來讀取file資料的FileReader
var fileReader = new FileReader();

//監控#fileUploader的值變化
fileUploader.addEventListener("change", function(event) {
  if (this.files.length > 0) {
   //有選取file時,使用fileReader讀取file資料
    //readAsDataURL可以將讀取到的file資料轉成
  //data:......的URL型式,在讀取完後觸發load
  //事件,URL存在FileReader.result中
    fileReader.readAsDataURL(this.files[0]);
  }else{
   //沒有選取file時,例如選擇取消,
    //將的src設成""
   imageView.src = "";
  }
}, false);

//fileReader讀取完file資料後會觸發load事件
fileReader.addEventListener("load", function(event) {
 //讀取後設定的src
  imageView.src = this.result;
}, false);

參考資料:
  1. FileReader

沒有留言 :

張貼留言