FileReader对象提供了异步读取存储在用户计算机上的文件的内容，使用 File或 Blob 对象指定要读取的文件或数据，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

一、FileReader的使用

注意：如果需要兼容低版本的浏览器，需要判断一下FileReader对象是否存在。

if (window.FileReader) {
	let reader = new FileReader();
} else {
	console.log('你的浏览器不支持读取文件');
}

二、FileReader的方法

方法 作用 参数 返回值
abort() 中止读取操作 none none
readAsArrayBuffer() 读取file和Blob内容 file/blob result属性中返回ArrayBuffer数据对象的文件内容
readAsBinaryString()[已被W3废弃] 读取file和Blob内容 file/blob result属性中返回原始二进制数据的文件内容
readAsDataURL() 读取file和Blob内容 file/blob

result属性中返回data:URL格式的Base64字符串的文件内容
readAsText() 读取file和Blob内容 file/blob result属性中返回一个字符串的文件内容

三、FileReader的属性

1、FileReader.error(只读)：一个异常，表示在读取文件时发生的错误 

2、FileReader.readyState(只读)：表示FileReader状态的数字

值 状态名 描述
0 EMPTY 未加载任何数据
1 LOADING 数据加载中
2 DONE

数据加载完毕

3、FileReader.result(只读)：读取完文件的内容，该属性在数据读取完成之后才有效，文件内容的格式是由读取的方法所决定。

四、FileReader的事件

1、FileReader.onabort：该事件是中止读取的时候触发。

2、FileReader.onerror：该事件是读取发生错误的时候触发。

3、FileReader.onload：该事件是读取完成的时候触发。

4、FileReader.onloadstart：该事件是读取操作刚开始的时候触发。

5、FileReader.onloadend：该事件是读取结束的时候触发（失败和成功的时候都会触发）。

6、FileReader.onprogress：该事件在读取的时候触发。

注意：

1、由于安全性原因，FileReader读取的是由input传入的文件或者是由ajax读取服务端返回的文件，不可以是指定路径的文件的读取。

2、FileReader可以在webworker中使用。

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="" />
	</head>

	<body>
		<input type="file" id="myFile" />
		<script type="text/javascript">
			if (window.FileReader) {
				var reader = new FileReader();
			} else {
				console.log('你的浏览器不支持读取文件');
			}
			var myFile = document.querySelector('#myFile');
			myFile.onchange = function () {
				var file = myFile.files[0];
				reader.readAsDataURL(file);
				reader.onload = function () {
					var data = reader.result;   //base64形式的文件内容
				};
                reader.onerror = function(){
                    console.log('读取失败');
                    console.log(reader.error);
                }
			};
		</script>
	</body>
</html>

 

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

【毕业设计】SpringBoot+Vue+MySQL Spring Boot大学校园生活信息平台平台源码+数据库+论文+部署文档

avatar 2048 AI社区
cover

沙漏MLP革命：MediaTek高维投影颠覆传统架构，AI效率跃升新高度

avatar 2048 AI社区

API 技术科普：从基础到实战，开发者必懂的「软件桥梁」

API 不是高深的技术，而是 “软件间沟通的通用语言”。无论是开发 APP、做系统集成，还是对接 AI 能力，掌握 API 都是开发者的必备技能。建议大家从调用公开 API（如 GitHub API、天气 API）开始实践，逐步理解其设计思想 —— 当你能自己设计一套清晰的 API 时，就真正迈入了 “工程化开发” 的门槛。如果大家有 API 调用或设计的问题，欢迎在评论区交流～

avatar 2048 AI社区