HTML5(FileRdeader)

主要作用：

　　异步读取存储在用户计算机上的文件（或原始缓冲区的内容）,使用File或Blob对象指定要读取的文件或数据。其中File是input元素上选择文件后返回的FileList对象，也可以是拖放操作生成的DataTransfer对象，还可以是来自HTMLCanvasElement上执行mozGetAsFile()方法后返回的结果。

创建实例：

　　var reader = new FileReader();//构造函数返回一个新构造的FileReader

方法：

　　abort():void终止文件读取操作，在返回时，readyState属性为DONE

　　readAsArrayBuffer(file):void异步按字节读取文件内容，一旦完成，result属性中保存的结果用ArrayBuffer对象表示

　　 readAsBinaryString(file):void异步按字节读取文件，result属性中结果为文件的二进制串

　　readAsDataURL(file):void异步读取文件内容，一旦完成，result属性中将用data:url的字符串形式表示

　　readAsText(file,encoding):void异步按字符串读取文件内容，result属性中结果以字符串形式表示

事件:

　　onabort当读取操作被终止的时调用

　　onerror当读取操作发生错误时调用

　　onload当读取操作成功完成时调用

　　onloadend当读取操作完成时调用，不管成功还是失败

　　onloadstart当读取操作将要开始之前调用

　　onprogress在读取数据过程中周期性调用

读取方式：

　　readAsArrayBuffer读取文件后会在内存中创建一个ArrayBuffer对象（二进制缓冲区），将二进制数据放进去。通过这种方式可以直接在网络中传输二进制内容。

　　ArrayBuffer中的内容对外是不可见的，要查看其中的内容就要引入另一概念：类型化数组。

　　readAsBinaryString readAsDataURL用这个可以不经过后台，直接将本地图片显示在页面上。这样可以减少前后端频繁的交互过程，减少服务器端无用的图片资源。

　　readAsText读取文件的单位是字符，因此对于文本文件只要按规定的编码方式读取即可。

二进制数据上传

　　HTML5体系的建立引入一大堆的新东西，基于XHR2，我们可以直接上传或下载二进制内容，无需像以往一样通过form标签由后端拉取二进制内容。

简单整理下上传逻辑：

　　1、通过input[type="file"]标签获取本地文件File对象

　　2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer

　　3、创建xhr对象，配置请求信息

　　4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送

 1 var input  = document.getElementById("file");// input file
 2 input.onchange = function(){
 3 /*FILE API使访问包含File对象的FileList成为可能，FileList代表被用户选择的文件，当用户选择一个文件时，handleFiles()方法会被调用，同时传入包含File对象的FileList，File是用户选中的文件。如果想让用户选择多个文件<input type="file" id="input" multiple>*/
 4 var file = this.files[0];
 5         if(!!file){
 6             var reader = new FileReader();
 7             reader.readAsArrayBuffer(file);
 8             reader.onload = function(){
 9                 var binary = this.result;
10                 upload(binary);
11         }
12     }
13 }
14 
15 //文件上传
16 function upload(binary){
17     var xhr = new XMLHttpRequest();
18     xhr.open("POST", "http://xxxx/opload");
19     xhr.overrideMimeType("application/octet-stream");
20     //直接发送二进制数据
21     if(xhr.sendAsBinary){
22         xhr.sendAsBinary(binary);
23     }else{
24         xhr.send(binary);
25     }
26     
27     // 监听变化
28     xhr.onreadystatechange = function(e){
29         if(xhr.readyState===4){
30             if(xhr.status===200){
31                 // 响应成功       
32             }
33         }
34     }