使用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);

--------------------------------------------------------------------------------------------------
另做了一個讀取 video 檔案長度 (秒數) 的範例，程式碼基本上差不多，只是改成把readAsDataURL() 得到的 src 設定在 <video> 上：
HTML :

<div>Choose a browser supported video file to load video duration.</div>
<input id="fileUploader" type="file" />
<div>Video length : <span id="videoLengthDisplayer"></span> (s)</div>

JS :

var fileUploader = document.getElementById("fileUploader");
var videoLengthDisplayer = document.getElementById("videoLengthDisplayer");
//用來讀取file資料的FileReader
var fileReader = new FileReader();

//監控#fileUploader的值變化
fileUploader.addEventListener("change", function(event) {
  if (this.files.length > 0) {
   //有選取file時，使用fileReader讀取file資料
    //readAsDataURL可以將讀取到的file資料轉成
  //data:......的URL型式
    fileReader.readAsDataURL(this.files[0]);
  }else{
   
  }
}, false);

fileReader.addEventListener("load", function(event) {
 var video = document.createElement('video');
  video.src = this.result;
  video.load();
  video.addEventListener("loadeddata", function(){
   videoLengthDisplayer.innerHTML = video.duration;
  });
  
}, false);

參考資料：

1. FileReader