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

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

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

例如：（html）

<form action=""><!--action属性值数据传到后端的路径-->
<label style="color:red;" for="up_img">上传图片</label>
<input accept="image/*" type="file" id="up_img" onchange="fileUpLoad(this);"/>
<div id="showImg">
</div>
</form>

js)

<script type="text/javascript">
var imgCont = document.getElementById("showImg");
var ipt = document.getElementById("up_img");
function fileUpLoad(_this){
var file = _this.files[0];
if(!/image\/\w+/.test(file.type)){ //html中已经用accept='image/*'限制上传的是图片了，此处判断可省略
alert("文件必须为图片！");
return false;
}
if(!FileReader){
alert("你的浏览器不支持H5的FileReader");
ipt.setAttribute("disabled","disabled");//浏览器不支持禁用input type='file'文件上传标签
return;
}
var fileReader = new FileReader();
fileReader.readAsDataURL(file);//将文件读取为Data URL 读取结果放在result中
fileReader.onload = function(e){
var img = '<img src="'+this.result+'"/>';
imgCont.innerHTML = img;
console.log(this.result);
}
}
</script>

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

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

谢谢