html5中的FileReader對象

表單中有圖片選項，選中圖片文件以後要求能夠預覽。這個功能不少控件都封裝好了，可是它們的底層都是FileReader對象。
FileReader對象提供了豐富的功能，包括以二進制、以文本方式讀取文件內容。有這兩種方式其實就已經足夠了。

一、readAsBinaryString(Blob|File)
二、readAsDataURL(Blob|File)
三、readAsText(Blob|File) 能夠指定文件編碼
四、readAsArrayBuffer(Blob|File)

ajax上傳文件也要用到FileReader。

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
http://www.javascripture.com/FileReader
http://www.cnblogs.com/hhhyaaon/p/5929492.html