在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果，在IE10以下浏览器中使用滤镜来解决图片显示问题。
HTML5中的FileReader对象主要是把文件读入内存中，并且读取文件中数据，目前为止，firefox3.6+、chrome6+、safari5.2+、opera11+及IE10浏览器支持FileReader对象，它有一下5种方法：
1、readBinaryString;
2、readAsText;
3、readAsDataURL 将对象或文件中数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。
4、readAsArrayBuffer;
5、abort;
现在我们要用的是第三种
var aFile=ev.dataTransfer.files;
var reader=new FileReader();
reader.onload=function(){
alert(reader.result);
};
reader.onerror=function(){
alert('读取错误');
};
reader.onloadend=function(){
alert('读取完成');
};
reader.onloadstart=function(){
alert('开始读取');
};
reader.onprogress=function(ev){
var scale=ev.loaded/ev.total;
alert('正在读取');
}
rearder.onabort=function(){
alert('读取中断');
};
强制中断：
reader.abort();
通过文本形式读取：
reader.readAsText(aFile[0],'编码格式');
编码格式: utf-8
gb2312
通过base64方式读取：
reader.readAsDataURL(aFile[0]);
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
img{
width:100px;
height:100px;
}
form label{
display:inline-block;
width:100px;
height:30px;
line-height:30px;
text-align:right;
}
</style>
</head>
<body>
<form ).click(function(){
$($(this).attr('file-target')).click();
});
$('[type=file]').on('change',function(){
var preview=$($(this).attr('prev-target'));
var reader=new FileReader();
reader.onload=function(e){
var avatorFile= e.target.result;
if(!avatorFile){
alert('您的浏览器不支持预览功能');
return;
}
preview.attr('src',avatorFile);
}
reader.readAsDataURL(this.files[0]);
})
</script>
</html>