html5中的FileReader对象

表单中有图片选项，选中图片文件之后要求可以预览。这个功能很多控件都封装好了，但是它们的底层都是FileReader对象。
FileReader对象提供了丰富的功能，包括以二进制、以文本方式读取文件内容。有这两种方式其实就已经足够了。

1、readAsBinaryString(Blob|File)
2、readAsDataURL(Blob|File)
3、readAsText(Blob|File) 可以指定文件编码
4、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

转载于:https://www.cnblogs.com/weiyinfu/p/7421816.html