HTML5中FileReader对象的学习-博客-最代码

首页>博客>HTML5中FileReader对象的学习

西北马二最代码 2017-10-21 14:49:16

HTML5中FileReader对象的学习

最近在推送前端技术的某公众号上看到了预览前端图片方法的实现(使用HTML5中提供的FileReader()方法)，觉得很有必要学习一下，所以打算写这一篇文章与大家一同分享！

一、FileReader对象：

1、作用：

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区中）的内容，使用File或Blob对象指定要读取的文件或者数据；

2、拥有的属性：

FileReader.error: 只读，表示读取文件时发生的错误；

FileReader.readyState: 只读，用一个数字表示读取文件时FileReader的状态；

EMPTY 0 尚未加载数据

LOADING 1 数据正在加载

DONE 2 整个读取请求已经完成

FileReader.result: 只读，读取的文件的内容，此属性只在读取操作完成后有效，数据格式取决于哪些方法用于启动读取操作。

3、事件处理程序：

FileReader.onabort: onabort 事件处理程序，每次读取操作终止时触发此事件；

FileReader.onerror: onerror 事件处理程序，每次读取操作时发生错误时触发此事件；

FileReader.onload: onload 事件处理程序，每次读取操作成功完成时触发此事件；

FileReader.onloadstart: onloadstart 事件处理程序，每次读取操作开始时触发此事件；

FileReader.onprogress: onprogress 事件处理程序，读取Blob内容时触发此事件。

注意：做为FileReader，因为其继承了EventTarget，所以所有这些事件都可以通过addEventListener方法来监听。

4、方法：

FileReader.abort():void 终止文件读取操作，返回结果后，readyState会是DONE;

FileReader.readAsArrayBuffer(file): void 开始读取指定的内容Blob，异步按字节读取文件内容，结果用ArrayBuffer对象表示；

FileReader.readAsBinaryString(file): void 开始读取指定的内容Blob，异步按字节读取文件内容，结果为文件的二进制串；

FileReader.readAsDataURL(file):void 开始读取指定的内容Blob，异步按字节读取文件内容，结果用data:url的字符串形式表示；

FileReader.readText(file,encoding):void 开始读取指定的内容Blob，异步按字节读取文件内容，结果用字符串形式表示。

5、构造函数：

FileReader(): 返回一个新建的FileReader。

6、浏览器兼容：

桌面：Firefox: 3.6 Chrome:7 Edge:支持 IE:10 Opera:12.02 safari:6.0

7、检测浏览器是否支持该对象：

//检测你的浏览器是否支持FileReader对象
if(window.FileReader){
	var read = new FileReader();
	//your code...
}else{
	alert("Not supported by your browser!");
}

二、下面是一个完整的“栗子”：

<!DOCTYPE html>
<html>
<head>
	<title>FileReader学习-文件上传</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">	
</head>
<body>
	<script type="text/javascript">
		if (window.FileReader) {
			//your code...
			//定义一个读取本地文件的函数
			var readLocalFile = function(){
				//获取id为的元素
				var localFile = document.getElementById("openLoadFile").files[0];
				//实例化一个新的对象
				var reader = new FileReader();
				//创建一个包含返回结果的变量
				var readResult;
				//用新创建的对象调用加载方法
				reader.onload = function(event){
					//将目标事件读取到的文件给创建的变量
					readResult = event.target.result;
					//获取相关元素的id
					document.getElementById("img").src = readResult;
					document.getElementById("fileResult").value = readResult;
				}
				//用新创建的对象调用加载时出错方法
				reader.onerror = function(event){
					alert("error");
				}
				//调用读取时以何种格式输出的方法
				readResult = reader.readAsDataURL(localFile,"UTF-8");
			}
		}else{
			alert("Not supported by your browser!");
		}
	</script>
<section>
        <input type="file" id="openLoadFile" onchange="readLocalFile()";/>
        <div>
        	<img src="" id="img"/>
        </div> 
        <div>
        	<textarea id="fileResult" rows="30" cols="60"></textarea>
        </div>
    </section> 	
</body>
</html>

运行结果如下图所示：

打赏

已有1人打赏

2个评论