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后发送

代码实现如下：

var input  = document.getElementById("file");// input file
input.onchange = function(){
/*FILE API使访问包含File对象的FileList成为可能，FileList代表被用户选择的文件，当用户选择一个文件时，handleFiles()方法会被调用，同时传入包含File对象的FileList，File是用户选中的文件。如果想让用户选择多个文件<input type="file" id="input" multiple>*/
var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(){
                var binary = this.result;
                upload(binary);
        }
    }
}

//文件上传
function upload(binary){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload");
    xhr.overrideMimeType("application/octet-stream");
    //直接发送二进制数据
    if(xhr.sendAsBinary){
        xhr.sendAsBinary(binary);
    }else{
        xhr.send(binary);
    }
    
    // 监听变化
    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status===200){
                // 响应成功       
            }
        }
    }