input标签上传图片到后端前用H5的FileReader 方法实现图片的显示

要想在页面上显示上传的本地图片，以前我们的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据,将读取的数据放到result中，通多读取到数据就能实现本地图片不需上传就可以显示。目前高级浏览器实现了FileReader接口。

这个URL来显示图片。而H5的FileReader接口支持本地预览，FileReader

例如：（html）

		

			上传图片
			
			

			
		

js)

通过上面的方法：就实现了图片不需要上传就可以显示本地图片

FileReader的事件方法参数列表：

事件，方法，参数	描述
方法
1）abort	中断读取
2）readAsText(file,[enconding:string])	将文件读取为文本，该方法有两个参数，第二个参数是文件编码格式，默认的是UTF-8,方法很容易理解，将文件以文本方式读取， 读取结果就是这个文本文件得内容。
3）readAsBinaryString(file)	将文件读取为二进制字符串，通常将它传给后端，后端将通过该字段存储文件
4）readAsDataURL(file)	程序中用到的方法，该方法将文件读取为data:开头的字符串，这段字符串的实质就是Data URL, Data URL是一种将小文件直接嵌入到文档的方案，这里的小文件通常是指html和图像等文件
事件：	描述：
1》onabort/abort	中断时触发
2》onerror/error	出错时触发
3》onloadstart/loadstart	读取开始时触发
4》onload/load	文件读取成功完成时触发
5》onloadend/loadend	文件读取成功完成时触发，无论成功Or失败
6》onprogress/progress	文件读取中

具体的HTML5FileReader方法事件讲解可以阅览：点击打开链接http://www.javascripture.com/FileReader

谢谢