这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇web前端图片上传(1)就会知道，其实也是按照这种方式上传你的，但是由于上次时间比较紧张，没有详细的介绍今天的主角filereader对象。今天就来好好的看看他。
以下是他常用的几种方法。
- abort none 中断读取
- readAsBinaryString file（blob） 将文件读取为二进制码
- readAsDataURL file（blob） 将文件读取为 DataURL
- readAsText file, （blob） 将文件读取为文本
但是这个可能不好理解是吧。咱们直接上程序，看看程序中是怎么运行的。我期中会加上自己的注释，方便大家查询。同样的，这段程序直接放在编辑器里面，然后直接运行就好了。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>FileReader</title>
6 </head>
7 <body>
8 <p>
9 <label>请选择一个文件：</label>
10 <input type="file" id="file" />
11 <input type="button" value="读取图像" onclick="readAsDataURL()" />
12 <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
13 <input type="button" value="读取文本文件" onclick="readAsText()" />
14 </p>
15 <div id="result" name="result"></div>
16 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
17 <script type="text/javascript">
18 var result = document.getElementById("result"); 19 var file = document.getElementById("file"); 20 //判断浏览器是否支持FileReader接口
21 if(typeof FileReader == 'undefined') { 22 result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>"; 23 //使选择控件不可操作
24 file.setAttribute("disabled", "disabled"); 25 } 26 function readAsDataURL() { 27 //检验是否为图像文件
28 //var file = document.getElementById("file").files[0];//js的写法，也可以写成jquery的
29 var file = $("#file").prop("files")[0];//jquery的写法
30 if(!/image\/\w+/.test(file.type)) { 31 alert("看清楚，这个需要图片！"); 32 return false; 33 } 34 var reader = new FileReader(); 35 //将文件以Data URL形式读入页面
36 reader.readAsDataURL(file); 37 reader.onload = function(e) { 38 console.log(this.result); 39 var result = document.getElementById("result"); 40 //显示文件
41 result.innerHTML = '<img src="' + this.result + '" alt="" />'; 42 } 43 } 44
45 function readAsBinaryString() { 46 var file = document.getElementById("file").files[0]; 47 var reader = new FileReader(); 48 //将文件以二进制形式读入页面
49 reader.readAsBinaryString(file); 50 reader.onload = function(f) { 51 console.log(f); 52 console.log(this.result); 53 var result = document.getElementById("result"); 54 //显示文件
55 result.innerHTML = this.result; 56 } 57 } 58
59 function readAsText() { 60 var file = document.getElementById("file").files[0]; 61 var reader = new FileReader(); 62 //将文件以文本形式读入页面
63 reader.readAsText(file); 64 reader.onload = function(f) { 65 var result = document.getElementById("result"); 66 //显示文件
67 result.innerHTML = this.result; 68 } 69 } 70 </script>
71 </body>
72 </html>
这里说下程序中的28行和29行，是js和jq的两种写法，而且jq中只能写porp，写attr是会报错的，不知道是不是我的jq版本的问题。
readAsDataURL（）这个方法其实就是把这个文件转换成为了base64的格式，如果是中图片的话，那就是图片的base64格式。
readAsText（）这个方法就是读取成为文本，如果你上传的是一个txt的文件，那么是直接可以读出来你们的文本信息的，但是doc文档格式是不可以的。当然了，html的格式是可以的。
至于51行和52行的打印，是为了看到，究竟是哪个是咱们需要的文件格式，发现了，this.result才是咱们需要的东西。而里面的f并不是。f.target.result这个才是咱们需要的字段。
最后还是附上我前两篇文章的链接吧。方便大家查阅。web前端图片上传(1)，web前端图片上传(2)