FileReader
HTML5 定义了 FileReader 作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader 接口提供了读取文件的方法和包含读取结果的事件模型。
FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:
1. 检测浏览器对FileReader的支持
if(window.FileReader) {
var fileReader = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
2. 调用FileReader对象的方法
FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。
方法名 | 参数 | 描述 |
abort | none | 中断读取 |
readAsBinaryString | file | 将文件读取为二进制码 |
readAsDataURL | file | 将文件读取为 DataURL |
readAsText | file, [encoding] | 将文件读取为文本 |
3. FileReader处理事件简介
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。
事件 | 描述 |
onabort | 中断时触发 |
onerror | 出错时触发 |
onload | 文件读取成功完成时触发 |
onloadend | 读取完成触发,无论成功或失败 |
onloadstart | 读取开始时触发 |
onprogress | 读取中 |
文件一旦开始读取,无论成功或失败,方法并不会返回读取结果,这一结果(储存在result属性中)要用FileReader处理事件去获取。
fileReader.onload = function() {
this.result;
};
代码示例
1. readAsDataURL:上传图片并预览。
<script type="text/javascript">
function uploadFile(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
document.getElementById("portrait").src = e.target.result;
}
}
</script>
<label>请选择一个文件:</label>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
如果要限定上传文件的类型,可以通过文件选择器获取文件对象并通过type属性来检查文件类型。
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
2. 上传文件并回显文件内容
<script>
function uploadFile(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload=function(e){
document.getElementById("text").innerHTML = this.result;
}
}
</script>
<label>请选择一个文件:</label>
<input type="file" id="file" onchange="uploadFile()" multiple />
<div id="text">文件</div>
URL.createObjectURL(file)
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
图片上传并预览。
<script>
function uploadFile(){
var file = document.getElementById("file").files[0];
// 图片预览
document.getElementById("portrait").src = window.URL.createObjectURL(file);
}
</script>
<label>请选择一个文件:</label>
<input type="file" id="file" onchange="uploadFile()" multiple />
<img id="portrait" src="" width="70" height="75">