Html5 File Reader 接口详解
FileReader 接口是 HTML5 中的一个异步 API，用于读取文件中的数据。该接口提供了四个方法，分别是 readAsBinaryString、readAsText、readAsDataURL 和 abort。其中，readAsBinaryString 方法将文件读取为二进制编码，readAsText 方法将文件读取为文本，readAsDataURL 方法将文件读取为 DataURL，abort 方法用来中断读取操作。
FileReader 接口的使用场景非常广泛，如上传文件、预览图片、读取文件内容等。下面我们将详细介绍 FileReader 接口的使用方法和事件模型。
FileReader 接口的方法
FileReader 接口提供了四个方法：
1. readAsBinaryString(file)：将文件读取为二进制编码。
2. readAsText(file, [encoding])：将文件读取为文本，可以指定编码方式。
3. readAsDataURL(file)：将文件读取为 DataURL。
4. abort()：中断读取操作。
FileReader 接口的事件
FileReader 接口包含了一套完整的事件模型，用于捕获读取文件时的状态。这些事件包括：
1. onabort：中断事件，当读取操作被中断时触发。
2. onerror：错误事件，当读取操作出现错误时触发。
3. onloadstart：开始事件，当读取操作开始时触发。
4. onprogress：进度事件，当读取操作进行中时触发。
5. onload：成功事件，当读取操作成功时触发。
6. onloadend：完成事件，无论读取操作是否成功时触发。
FileReader 接口的使用
使用 FileReader 接口非常简单。需要创建一个 FileReader 对象，然后使用该对象的方法来读取文件。下面是一个使用 FileReader 接口读取文件的示例代码：
```
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
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();
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>
```
在上面的示例代码中，我们首先判断浏览器是否支持 FileReader 接口，如果不支持则显示提示信息并禁用文件选择控件。然后，我们定义了三个函数，分别用于读取文件为 DataURL、二进制字符串和文本。每个函数都创建了一个 FileReader 对象，并使用该对象的方法来读取文件。当读取操作完成时，我们使用 onload 事件来获取读取结果并显示出来。
