通过file按钮上传的图片如何显示出来 FileReader

参考个人博客：http://www.zhuzhuman.com/nav-1/type-1/article/19.html

当我们使用file类型的按钮上传图片的时候，有时候希望图片能显示在页面里，那么如何显示呢？
      使用file的onchange事件可以监听到上传按钮是否发生了上传。如果这时候获取它的value值，在部分浏览器上是可以获取到图片路径的。但是一些浏览器出于安全考虑，获取到的路径会全部变成"C:\fakepath\ + 文件名"的形式。而我们使用该路径去显示图片是无法显示的。
      H5中有FileReader,用于读取文件。我们可以在file按钮onchange的时候，去读取上传文件的信息。从而获取上传图片的dataURL格式的数据(通过data协议显示图片 data:image/图片格式;base64,…)，
##FileReader使用方法##

1. 创建

new FileReader()

<script type="text/javascript">
	var fr = new FileReader();  
	// 可使用window.FileReader是否为真来判断当前浏览器是否支持FileReader。
	// if(window.FileReader) {
   
		// var fr = new FileReader();  
	// }
</script>

2. 事件

1. onabort       当读取操作被中止时调用
2. onerror       当读取操作发生错误时调用
3. onload        当读取操作成功完成时调用
4. onloadend     当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用
5. onloadstart   当读取操作将要开始之前调用
6. onprogress    在读取数据过程中周期性调用

例：
	fr.onload = function(){
		this.result; 
		// 文件一旦开始读取，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，成功则result值为读取的结果。
	};

3. 状态常量

常量名     值      描述
——————————————————————————————————
EMPTY	  0	   还没有加载任何数据
LOADING	  1	   数据正在被加载
DONE	  2	   已完成全部的读取请求

###4. 属性###
1. error 在读取文件时发生的错误。只读。
2. readyState 表明FileReader对象的当前状态. 值为状态常量中的一个。只读。
3. result 读取到的文件内容。