` //首先判断你的浏览器是否支持FileReader接口： if( typeof FileReader == "undefined" ){ alert( "您的浏览器不支持FileReader！" ); }else{ // do FileReader things }

`

读取后台返回的流文件并下载，如果状态500表示过期 解析文本。 ` response.blob().then( blob => { if(typeof FileReader === 'undefined'){ notification.open({ message:'您的浏览器不支持 FileReader，请升级浏览器', icon: }) } const reader = new FileReader();

`

API

` FileReader有四个方法，三个用来读取文件，一个用来中断读取：

方法：abort 参数：无 作用：中断读取

方法：readAsBinaryString 参数：file 作用：将文件读取为二进制码（打印出来在页面上是一堆乱码，二进制麽！）

方法：readAsDataURL 参数：file 作用：将文件读取为DataURL（本例中用的就是这个方法，result就是文件的base64字符，DataURI）

方法：readAsText 参数：file, [optional] in DOMString encoding（第二个参数是文本的编码方式，默认UTF-8） 作用：将文件读取为文本（读取的结果就是这个文本文件中的内容）

此外，FileReader还包含了一套完整的事件模型，用来捕获读取文件时的状态：

事件：onabort 描述：读取中断时触发

事件：onerror 描述：出错时触发

事件：onload 描述：文件读取成功完成时触发

事件：onloadend 描述：读取完成时触发，不论读取成功还是失败

事件：onloadstart 描述：读取开始时触发

事件：onprogress 描述：读取中

文件一旦被读取，不论成功还是失败， 实例（var reader = new FileReader）的result属性都会被填充。 如果读取失败，result的值就是null， 如果读取成功，result的值就是读取的结果。

`

上传文件 ` 在页面结构里，我们需要给一个input用来上传文件： 则在支持FileReader的浏览器里就可以这样写： document.getElementById("File").addEventListener("change", readFile, false); 这是在监听input的change事件，一旦选择了文件，触发了change事件，即刻调用readFile方法。 besides，如果是上传图片， 我们在结构里可以再给一个img：用来放置上传的图片。 由此我们也顺便实现了在图片发送之前即显示在页面上的功能。

现在定义这个关键的readFile方法： function readFile(){ var file = this.files[0]; //input if( file.size > 510241024 ){ //用size属性判断文件大小不能超过5M alert( "你上传的文件太大了！" ) }else{ var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var res = this.result; $("#Img").attr("src", res); } } } 注意，这里的this.result是把文件转换为base64后的字符串， 如果是图片，则赋值给img的src即可显示。 `