HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：
1.检测浏览器对FileReader的支持
if(!window.FileReader){
span.innerHTML = "你的浏览器不支持图片上传预览功能";
return;
}2.调用FileReader对象的方法
FileReader的实例拥有4个方法，其中3个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
方法名参数描述abortnone中断读取readAsBinaryStringfile将文件读取为二进制码readAsDataURLfile将文件读取为DataURLreadAsTextfile,[encoding]将文件读取为文本
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以data:开头的字符串，这段字符串的实质就是DataURL，DataURL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与html等格式的文件。
3.处理事件
FileReader包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。
事件描述onabort中断时触发onerror出错时触发onload文件读取成功完成时触发onloadend读取完成触发，无论成功或失败onloadstart读取开始时触发onprogress读取中
文件一旦开始读取，无论成功或失败，实例的result属性都会被填充。如果读取失败，则result的值为null，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function showImage(fileElement){
var span = document.getElementById("show");
//判断浏览器是否支持文件预览
if(!window.FileReader){
span.innerHTML = "你的浏览器不支持图片上传预览功能";
return;
}
var file = fileElement.files[0];
//用正则表达式判断是否是图片类型
if(!/^image\/\w+$/.test(file.type)){
alert("请按规矩出牌");
return;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
span.innerHTML = "<img src="+reader.result+" alt='this is a img'/>";
}
}
</script>
</head>
<body>
<form action="" enctype="">
<fieldset>
<legend>图片文件上传预览</legend>
<input type="file" name="photo" id="photo" onchange="showImage(this)"/>
<span id="show"></span>
</fieldset>
</form>
</body>
</html>