HTML 5 中FileReader的使用

FileReader 接口主要用来把文件读入到内存中，而且读取文件里的数据。FileReader接口提供了一个异步API,使用该API能够在浏览器主线程中异步訪问文件系统

，读取文件里的数据。

FileReader的使用方式很easy。能够依照例如以下步骤创建FileReader对象并调用其方法：

1.检測浏览器对FileReader的支持

<script type="text/javascript">
    if(typeof FileReader == "undefined")
alert("浏览器不支持FileReader");
    else
alert("浏览器支持FileReader");
</script>

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，当中 3 个用以读取文件，还有一个用来中断读取。以下的表格列出了这些方法以及他们的參数和功能。须要注意的是，不管读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	參数	描写叙述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个參数，当中第二个參数是文本的编码方式。默认值为 UTF-8。

这种方法很easy理解。将文件以文本方式读取，读取的结果即是这个文本文件里的内容。

readAsBinaryString：该方法将文件读取为二进制字符串。通常我们将它传送到后端。后端能够通过这段字符串存储文件。

readAsDataURL：这是样例程序中用到的方法。该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。

这里的小文件一般是指图像与 html 等格式的文件。

3. 处理事件

FileReader 包括了一套完整的事件模型，用于捕获读取文件时的状态。以下这个表格归纳了这些事件。

事件	描写叙述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完毕时触发
onloadend	读取完毕触发。不管成功或失败
onloadstart	读取開始时触发
onprogress	读取中

文件一旦開始读取，不管成功或失败，实例的 result 属性都会被填充。假设读取失败。则 result 的值为 null ，否则即是读取的结果。绝大多数的程序都会在成功读取文件的时候，抓取这个值。

4. 使用演示样例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FileReader的使用演示样例</title>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
if(typeof FileReader == "undefined"){
result.innerHTML = "您的浏览器不支持FileReader!!";
file.setAttribute("disabled","disabled");
}// 读取图片路径
function readAsDataURL(){
var file1 = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file1.type)){
alert("请传图片文件,谢谢!!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file1);
reader.onload = function(e){
var result = document.getElementById("result");
// 在页面显示文件
result.innerHTML = "<img src='" + this.result + "' alt=''/>";
}
}// 读取二进制文件
function readAsBinaryString(){
var file1 = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsBinaryString(file1);
reader.onload = function(e){
var result = document.getElementById("result");
// 在页面显示文件
result.innerHTML =this.result;
}
}// 读取文本文件
function readAsText(){
var file1 = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsText(file1,"GBK");
reader.onload = function(e){
var result = document.getElementById("result");
// 在页面显示文本文件
result.innerHTML = this.result;
}
}
</script>
</head>
<body>
<p>
<label>请选择文件：</label>
<input type="file" id="file"/>
<input type="button" onclick="readAsDataURL()" value="读取图片数据"/>
<input type="button" onclick="readAsBinaryString()" value="读取二进制数据"/>
<input type="button" onclick="readAsText()" value="读取文本文件"/>
</p>
<div id="result">
</div>
</body>
</html>