FileReader可以已异步的方式用来操作input元素选取的文件,拖拽操作获取的文件以及来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
构造函数
FileReader()
属性列表
- error DOMError 在读取文件时发生的错误. 只读.
- readyState unsigned short 表明FileReader对象的当前状态. 值为State constants中的一个. 只读
- result jsval 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.
readyState三个状态
- readyState = 0 ,fileReader对象刚建立
- readyState = 1, 开始读取文件
- readyState = 2,文件读取完成进入内存
事件列表
- onabort 在读取文件过程中,用户调用abort方法进行阻止触发
- onerror 文件读取过程发生错误触发
- onload 整个文件读取完成,用户没有abort,文件读取争正常触发
- onloadend 读取完成,即使是用户强制abort或者读取错误,最终都会触发这个事件
- onloadstart 开始读取的事件
- onprogress 读取进度
方法列表
- abort 强制停止读取文件,这是会触发abort事件和error事件
- readAsDataURL(Blob blob) 将文件已数据路径读取,适合读取图片等
- readAsText(Blob blob, optional DOMString encode) 以字符串的形式读取,适合读取文本文件,将返回文本文件里的内容
- readAsArrayBuffer(Blob blob) 将以数组数据的形式读取文件,这对操作文件很有用
- 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);
}