html5 FileReader

FileReader可以已异步的方式用来操作input元素选取的文件，拖拽操作获取的文件以及来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.

构造函数

FileReader()

属性列表

1. error DOMError 在读取文件时发生的错误. 只读.
2. readyState unsigned short 表明FileReader对象的当前状态. 值为State constants中的一个. 只读
3. result jsval 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

readyState三个状态

1. readyState = 0 ,fileReader对象刚建立
2. readyState = 1, 开始读取文件
3. readyState = 2,文件读取完成进入内存

事件列表

1. onabort 在读取文件过程中，用户调用abort方法进行阻止触发
2. onerror 文件读取过程发生错误触发
3. onload 整个文件读取完成，用户没有abort，文件读取争正常触发
4. onloadend 读取完成，即使是用户强制abort或者读取错误，最终都会触发这个事件
5. onloadstart 开始读取的事件
6. onprogress 读取进度

方法列表

1. abort 强制停止读取文件，这是会触发abort事件和error事件
2. readAsDataURL(Blob blob) 将文件已数据路径读取，适合读取图片等
3. readAsText(Blob blob, optional DOMString encode) 以字符串的形式读取，适合读取文本文件，将返回文本文件里的内容
4. readAsArrayBuffer(Blob blob) 将以数组数据的形式读取文件，这对操作文件很有用
5. readAsBinaryString(Blob blob) 将二进制字符读取文件，适合将文件读取上传到服务器

做些小实验

利用readAsText将文本文件的内容读取到控制台上

//html代码 <input type = "file" id = "myfile"/><br>提示 ： <p id = "tip"></p>//javascript代码var tip = document.querySelector("#tip");var fileEle = document.querySelector("#myfile"); //输入框获取文件var reader = new FileReader();reader.onload = function(ev){ //读取完成触发  tip.innerText = "onload";  var result = reader.result;  tip.innerText = result ; //将文本内容读取<p>标签上}fileEle.onchange = function(){ //注册上传文件事件    var file = fileEle.files[0]; //获取文件对象file,file继承Blob对象      reader.readAsText(file,"UTF-8"); //已文本的方式读取}

利用readAsDataURL拖动一张图片显示在屏幕上

//html代码<div class = "target" id = "target"></div> //js代码var target = document.querySelector("#target"); //获取目标位置var reader = new FileReader();var file = null ;reader.onload = function(ev){ //读取文档，将图片显示在目标位置上    var result = reader.result;    var img = new Image();    img.src = result ;    target.appendChild(img); }target.addEventListener("drop",function(ev){ //当把图片拖放时候，读取文件  file = ev.dataTransfer.files[0];  reader.readAsDataURL(file);  ev.preventDefault();  //阻止浏览器默认行文});

利用readAsBinaryString将二进制文件上传到服务器

//html代码 <input type = "file" id = "myfile"/><br> <button type = "button" id = "abort">停止上传</button><br>提示 ： <p id = "tip"></p>//javascript代码var tip = document.querySelector("#tip");var btn = document.querySelector("#abort");var fileEle = document.querySelector("#myfile"); //输入框获取文件var reader = new FileReader();var size = 0 ;btn.onclick = function(){   reader.abort(); //停止读取文件，将触发abort和error事件};fileEle.onchange = function(){ //选择文件的事件   var file = fileEle.files[0];   size = file.size ; //获取文件大小，用来做进度提示   reader.readAsBinaryString(file); //读取文件}reader.onabort = function(ev){     tip.innerText = "onabort";}reader.onerror = function(ev){  tip.innerText = "onerror";}reader.onload = function(ev){ //读取完成，这里利用jq的ajax    $.ajax({        url : "xxx",        type : "post",        data : {file,reader.result}  //文件二进制数据        success : function(){          tip.innerText = "文件上传成功";        },        error : function(){          tip.innerText = "文件上传失败";        }    });}reader.onloadend = function(ev){  tip.innerText = "onloadend";}reader.onloadstart = function(ev){  tip.innerText = "onloadstart";}reader.onprogress = function(ev){ //显示读取进度  tip.innerText = (reader.result.length / size) * 100 + "%";}

利用readAsArrayBuffer，new Blob和createObjectURL 创建一个下载链接

//html代码 <input type = "file" id = "myfile"/><br>//javascript代码var fileEle = document.querySelector("#myfile"); //输入框获取文件var reader = new FileReader();reader.onload = function(ev){ //读取完成触发    var blob = reader.readAsArrayBuffer();    var _blob = new Blob([blob],{type,"image/png"}); //创建一个图片的bolb对像，装载数据    var url = Window.URL.createObjectURL(_blob); //创建一个图片路径    var a = document.createElement('a');  //创建一个a标签来下载    a.href = url ;    a.donwload = 'color.png';    a.textContent = 'Download color.png';       body.appendChild(a);}fileEle.onchange = function(){ //注册上传文件事件    var file = fileEle.files[0]; //获取文件对象file,file继承Blob对象      reader.readAsArrayBuffer(file); }