主要作用:
异步读取存储在用户计算机上的文件(或原始缓冲区的内容),使用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 }