1、简介
FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File
或 Blob
对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>
元素上选择文件后返回的FileList
对象,也可以来自拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()
方法后返回结果。
2、构造函数
返回一个新构造的FileReader
。
var reader = new FileReader();
3、属性
一个DOMException
,表示在读取文件时发生的错误 。
表示FileReader
状态的数字。取值如下:
常量名 | 值 | 描述 |
EMPTY | 0 | 还没有加载任何数据. |
LOADING | 1 | 数据正在被加载. |
DONE | 2 | 已完成全部的读取请求. |
文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。
4、事件处理
处理abort
事件。该事件在读取操作被中断时触发。
处理error
事件。该事件在读取操作发生错误时触发。
处理load
事件。该事件在读取操作完成时触发。
处理loadstart
事件。该事件在读取操作开始时触发。
处理loadend
事件。该事件在读取操作结束时(要么成功,要么失败)触发。
因为 FileReader
继承自EventTarget
,所以所有这些事件也可以通过addEventListener
方法使用。
5、方法
中止读取操作。在返回时,readyState
属性为DONE
。
FileReader.readAsArrayBuffer()
开始读取指定的 Blob
中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer
数据对象.
FileReader.readAsBinaryString()
开始读取指定的Blob
中的内容。一旦完成,result
属性中将包含所读取文件的原始二进制数据。
开始读取指定的Blob
中的内容。一旦完成,result
属性中将包含一个data:
URL格式的字符串以表示所读取文件的内容。
开始读取指定的Blob
中的内容。一旦完成,result
属性中将包含一个字符串以表示所读取的文件内容。
6、浏览器兼容
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10 | 12.02[2] | 6.0 |
Support in Web Workers | 46 (46) | (Yes) | (Yes) | 未实现 | (Yes) | 未实现 |
error property uses DOMException , not DOMError | 58 (58) | (Yes) | (Yes) | 未实现 | (Yes) | 未实现 |
7、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file</title>
</head>
<body>
<input type="file" id="styleFile" />点我上传css文件<br/>
<input type="file" id="jsFile" />点我上传js文件<br/>
<input type="file" id="imageFile" accept="image/*"/>点我上传图片<br/>
<input type="file" id="videoFile" />点我上传视频<br/>
<div id="result"></div>
<script type="text/javascript">
//获取上传文件对象
var f1 = document.querySelector('#styleFile');
//为文件上传对象添加onchange事件,一旦发生文件上传操作就触发
f1.onchange = function(){
//通过this.files获取上传的文件对象,取下标为0的file对象
var fc1 = this.files[0];
//创建读取文件对象
var fReader = new FileReader();
//1.按字符读取文件内容,结果用字符串形式表示
fReader.readAsText(fc1);
//成功读取文件后的加载事件
fReader.onload = function(){
//创建style样式标签
var style = document.createElement("style");
//读取结果存放在result中
style.innerHTML = fReader.result;
document.querySelector('head').append(style);
};
};
var f2 = document.querySelector('#jsFile');
f2.onchange = function(){
var fl2 = this.files[0];
var reader = new FileReader();
//2.按字节读取文件内容,结果为文件的二进制串
reader.readAsBinaryString(fl2);
//3.按字节读取文件内容,结果用ArrayBuffer对象表示,读取blob对象
//reader.readAsArrayBuffer(fl2);
reader.onload = function(){
//创建style样式标签
var script = document.createElement("script");
//读取结果存放在result中
script.innerHTML = reader.result;
document.querySelector('body').append(script);
//console.log(reader.result);
//document.querySelector('#result').innerHTML = reader.result;
}
}
var f3 = document.querySelector('#imageFile');
f3.onchange = function(){
var fl3 = this.files[0];
var reader = new FileReader();
//读取文件内容,结果用data:url的字符串形式表示,readAsDataURL会将文件内容进行base64编码后输出
reader.readAsDataURL(fl3);
reader.onload = function(){
console.log(reader.result);
document.querySelector('#result').innerHTML='<img src="'+this.result+'" />' ;
}
}
var f4 = document.querySelector('#videoFile');
f4.onchange = function(){
var fl4 = this.files[0];
var reader = new FileReader();
//读取文件内容,结果用data:url的字符串形式表示,readAsDataURL会将文件内容进行base64编码后输出
reader.readAsDataURL(fl4);
reader.onload = function(){
console.log(reader.result);
document.querySelector('#result').innerHTML='<video src="'+this.result+'" controls/>' ;
}
}
</script>
</body>
</html>
上传的css文件内容
div{
width: 200px;
height: 100px;
background-color: red;
}
上传的js文件内容
document.querySelector('div').onclick=function () {
this.style.backgroundColor='yellow';
};
更多详细使用请访问:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader