filereader接口提供了一个异步api，使用该api可以在浏览器主线程中异步访问文件系统，读取文件中的数据，下面通过本文给大家分享html5中filereader接口使用方法实例详解，感兴趣的朋友一起看看吧
用来把文件读入内存，并且读取文件中的数据。filereader接口提供了一个异步api，使用该api可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有ff3.6+和chrome6.0+实现了filereader接口。
1、filereader接口的方法
filereader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
filereader接口的方法
方法名 参数描述
readasbinarystring file 将文件读取为二进制编码
readastext file,[encoding] 将文件读取为文本
readasdataurl file 将文件读取为dataurl
abort (none) 终端读取操作
2、filereader接口事件
filereader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
filereader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
3、filereader接口的使用
<script type="text/javascript">
var result=document.getelementbyid("result");
var file=document.getelementbyid("file");
//判断浏览器是否支持filereader接口
if(typeof filereader == 'undefined'){
result.innerhtml="<p>你的浏览器不支持filereader接口！</p>";
//使选择控件不可操作
file.setattribute("disabled","disabled");
}
function readasdataurl(){
//检验是否为图像文件
var file = document.getelementbyid("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
var reader = new filereader();
//将文件以data url形式读入页面
reader.readasdataurl(file);
reader.onload=function(e){
var result=document.getelementbyid("result");
//显示文件
result.innerhtml='<img src="' + this.result +'" alt="" />';
}
}
function readasbinarystring(){
var file = document.getelementbyid("file").files[0];
var reader = new filereader();
//将文件以二进制形式读入页面
reader.readasbinarystring(file);
reader.onload=function(f){
var result=document.getelementbyid("result");
//显示文件
result.innerhtml=this.result;
}
}
function readastext(){
var file = document.getelementbyid("file").files[0];
var reader = new filereader();
//将文件以文本形式读入页面
reader.readastext(file);
reader.onload=function(f){
var result=document.getelementbyid("result");
//显示文件
result.innerhtml=this.result;
}
}
</script>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readasdataurl()" />
<input type="button" value="读取二进制数据" onclick="readasbinarystring()" />
<input type="button" value="读取文本文件" onclick="readastext()" />
</p>
<p id="result" name="result"></p>
以上就是解析html5中filereader接口使用方法的详细内容。