The FileReader Interface

HTML5的FileReader接口提供了一系列 methods ，可以用來讀取File或者是Blob對象.

所有的methods 都是 asynchronous，意味著讀取文件的時候，整個程序不會卡住。

首先生成一個 instance ofFileReader

var reader = new FileReader();

method介紹:

readAsText()

用來讀取 text 文件。
兩個parameters:

• First: 用來讀取FileorBlob對象

  </li>

• Second(optional): 用來encoding file. 默認是UTF-8

  </li> </ul>

  因為所有方法都是asynchronous, 所以需要設置event listner去監聽文件是否讀取完。用onload來異步完成內容的讀取，文件的內容將儲存在FileReader實例的resultproperty里面

  var reader = new FileReader();
  
  reader.onload = function(e) {
      var text = reader.result;
  }
  reader.readAsText(file, encoding);</pre> 
  readAsDataURL() 
  
  用來生成圖片的 base64 encoded string 
  
  var reader = new FileReader();
  
  reader.onload = function(e) {
      var dataUrl = reader.result;
  }
  reader.readAsDataURL(file);</pre> 
  readAsBinaryString() 
  
  生成二進制代碼，方便傳輸，與XMLHttpRequest.sendAsBinary()配合使用 
  
  var reader = new FileReader();
  
  reader.onload = function(e) {
    var rawData = reader.result;
  }
  reader.readAsBinaryString(file);</pre> 
  readAsArrayBuffer() 
  
  生成ArrayBuffer,ArrayBuffer就是fixed-length binary data buffer. 當需要操縱文件比如轉換JPEG 圖像到 PNG的時候很有用 
  
  var reader = new FileReader();
  
  reader.onload = function(e) {
    var arrayBuffer = reader.result;
  }
  reader.readAsArrayBuffer(file);</pre> 
  abort() 
  
  終止文件讀取, 常常用在讀取大文件的時候 
  
  reader.abort();
   
  Examples 
  
  Reference 
  
  
  
  Reading Files Using The HTML5 FileReader API 
  </li>
  
  
  dragzone.js 
  </li>
  </ul>
  </div>
  來自：http://hao.jser.com/archive/8477/