FileReader简介说明

下文笔者讲述FileReader的简介说明,如下所示

FileReader简介

FileReader是一种异步读取文件机制
          可用于读取文件

重要是的事情说三遍：
     FileReader是异步的
	  如果同步读取文件,请另寻方法

FileReader提供如下方法

readAsArrayBuffer(file)：
     按字节读取文件内容
      返回一个ArrayBuffer对象

readAsBinaryString(file):
     按字节读取文件内容
	  返回二进制字符串 

readAsDataURL(file):
     读取文件内容
	 返回data:url字符串形式

readAsText(file,encoding)：
     按字符读取文件内容
	  返回字符串

abort():
     终止文件读取操作

abort

abort方法
    可以终止任何操作
     在读取大文件的时候 

例

reader.abort();

readAsArrayBuffer

readAsArrayBuffer方法读取文件后
    会在内存中创建一个ArrayBuffer对象(二进制缓冲区)
	将二进制数据存放在其中
      使用此方式,可直接在网络中传输二进制内容 

例：

  var reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = function () {
        console.log(this.result);
        console.log(new Blob([this.result]))
  }

readAsBinaryString

readAsBinaryString方法
    读取指定Blob或File对象

当读取完成的时候
     readyState状态会变成DONE(已完成)
     并触发loadend(en-US)事件
     同时result属性将包含所读取文件原始二进制格式

例

 var reader = new FileReader();
 reader.readAsBinaryString(file);
 reader.onload = function (e) {
    var arrayBuffer = reader.result;
 }

readAsDataURL

readAsDataURL方法
    会读取指定Blob或File对象
     并生成data URl(base64编码)

例

var reader=new FileReader
reader.readAsDateURL(file);
reader.onload = function (e) {
  var dataUrl = reader.result;
}
 

readAsText

readAsText方法
   可用来读取文本文件
   这个文件有两个参数
      第一个参数用来读取File对象或Blob对象
      第二个参数用来指定文件的编码(这是个可选参数,默认值为国际通用UTF-8编码格式)

例

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
     vat txt = reader.result;
}

readAsText:
    读取TXT文本文件乱码问题
    如果使用默认编码方式进行读取TXT文件,会出现中文乱码
       使用reader.readAsText(file,'编码')编码方式改为'gb2312’中文则不乱码

FileReader事件

onloadstart:
    读取文件开始时触发
onprogress:
    读取过程中触发，会返还本次读取文件的最大字节数和已经读取完毕的字节数，可以用来做进度条
onabort:
    在读取中断时触发
onerror:
    在读取文件失败时触发
onload:
    在读取完成时触发
onloadend:
    读取结束后触发,不论成功还是失败都会触发,触发时机在onload之后

提示： 因为FileReader的操作都是异步的，所以对有些需要同步获取数据的不能实现。