FileReader 接口主要用来把文件读入到内存中，而且读取文件里的数据。FileReader接口提供了一个异步API,使用该API能够在浏览器主线程中异步訪问文件系统

，读取文件里的数据。

FileReader的使用方式很easy。能够依照例如以下步骤创建FileReader对象并调用其方法：

1.检測浏览器对FileReader的支持

<script type="text/javascript">

    if(typeof FileReader == "undefined")

	alert("浏览器不支持FileReader");

    else

	alert("浏览器支持FileReader");

</script>

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，当中 3 个用以读取文件，还有一个用来中断读取。以下的表格列出了这些方法以及他们的參数和功能。须要注意的是 ，不管读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名 參数 描写叙述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个參数，当中第二个參数是文本的编码方式。默认值为 UTF-8。

这种方法很easy理解。将文件以文本方式读取，读取的结果即是这个文本文件里的内容。

readAsBinaryString：该方法将文件读取为二进制字符串。通常我们将它传送到后端。后端能够通过这段字符串存储文件。

readAsDataURL：这是样例程序中用到的方法。该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。

这里的小文件一般是指图像与 html 等格式的文件。

3. 处理事件

FileReader 包括了一套完整的事件模型，用于捕获读取文件时的状态。以下这个表格归纳了这些事件。

事件 描写叙述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完毕时触发
onloadend 读取完毕触发。不管成功或失败
onloadstart 读取開始时触发
onprogress 读取中

文件一旦開始读取，不管成功或失败，实例的 result 属性都会被填充。假设读取失败。则 result 的值为 null ，否则即是读取的结果。绝大多数的程序都会在成功读取文件的时候，抓取这个值。

4. 使用演示样例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>FileReader的使用演示样例</title>

		<script type="text/javascript">

			var result = document.getElementById("result");

			var file = document.getElementById("file");

			if(typeof FileReader == "undefined"){

				result.innerHTML = "您的浏览器不支持FileReader!!";

				file.setAttribute("disabled","disabled");

			}

			// 读取图片路径

			function readAsDataURL(){

				var file1 = document.getElementById("file").files[0];

				if(!/image\/\w+/.test(file1.type)){

					alert("请传图片文件,谢谢!!");

					return false;

				}

				var reader = new FileReader();

				reader.readAsDataURL(file1);

				reader.onload = function(e){

					var result = document.getElementById("result");

					// 在页面显示文件

					result.innerHTML = "<img src='" + this.result + "' alt=''/>";

				}

			}

			// 读取二进制文件

			function readAsBinaryString(){

				var file1 = document.getElementById("file").files[0];

				var reader = new FileReader();

				reader.readAsBinaryString(file1);

				reader.onload = function(e){

					var result = document.getElementById("result");

					// 在页面显示文件

					result.innerHTML =this.result;

				}

			}

			// 读取文本文件

			function readAsText(){

				var file1 = document.getElementById("file").files[0];

				var reader = new FileReader();

				reader.readAsText(file1,"GBK");

				reader.onload = function(e){

					var result = document.getElementById("result");

					// 在页面显示文本文件

					result.innerHTML = this.result;

				}

			}

		</script>

	</head>

	<body>

		<p>

			<label>请选择文件：</label>

			<input type="file" id="file"/>

			<input type="button" onclick="readAsDataURL()" value="读取图片数据"/>

			<input type="button" onclick="readAsBinaryString()" value="读取二进制数据"/>

			<input type="button" onclick="readAsText()" value="读取文本文件"/>

		</p>

		<div id="result">

		</div>

	</body>

</html>

file控件中选择一个图片文件。而且点击读取图片数据button，执行结果例如以下图：

file控件中选择一个dll文件，而且点击读取二进制数据，执行结果例如以下图：

file控件中选择一个txt文件，而且点击读取文本文件，执行结果例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ3h3ODc0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

HTML 5 中FileReader的使用的更多相关文章

  1. API中FileReader 接口事件

    FileReader 接口包含了一套完整的事件模型,用于捕获读取文件时的状态onabort        中断onerror        出错onloadstart    开始onprogress  ...

  2. [转]Java FileInputStream与FileReader的区别

    在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和R ...

  3. File API文件操作之FileReader二

    上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后 ...

  4. HTML5文件API之FileReader

    在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...

  5. Java FileInputStream与FileReader的区别

    在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和R ...

  6. 用FileReader对象获取图片base64代码并预览

    MDN中FileReader的详细介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 用FileReader获取图片base ...

  7. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  8. io流（文件字符流（FileReader，FileWriter文件的复制））

    文件字符流(FileReader,FileWriter文件的复制) 文件的复制 效率低的方法 注意:字符流需要刷新操作,字节流不需要,只有刷新后才可以将程序中的内容导入到目标文件中 package c ...

  9. Java IO5：字符流

    字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为上一篇文章写了,一个Unicod ...

随机推荐

  1. Java Security安全系列文档翻译笔记————KeyStore、密钥、证书、命令行实战

    发送方任务: 1.将文档.源代码打包到jar包(这样才干够签名) 2.在keystore中生成相应的Private key和Public key 3.用Private Key对jar包进行签名,这是j ...

  2. Boolean operations between triangle meshes

    Boolean operations between triangle meshes eryar@163.com Abstract. Boolean operations is one of basi ...

  3. tomcat 分别在window 和 Linux上配置SSL-安全问题

    公司项目收尾后.通过压力測试后的安全測试.安全測试后中,对于网络传输中数据加密问题存在安全隐患. 须要配置SSL. 简介下SSL协议:SSL或者Secure Socket Layer,是一种同意web ...

  4. SQL Server performance for alter table alter column change data type

    最近在搞一个升级脚本,发现有一张业务表中的某些字段长度需要调整,直接使用alter table alter column进行修改发现修改一列要用十几分钟!!!两三个列那用时简直不能容忍啊!google ...

  5. three.js 运行3D模型

    HTML  <!DOCTYPE html> <html style="height: 100%;"> <head> <title>m ...

  6. DG性能

    网络带宽 根据primary database redo产生的速率,计算传输redo需要的带宽. 出去tcp/ip网络其余30%的开销,计算需要的带宽公式: 需求带宽=((每秒产生redo的速率峰值/ ...

  7. 竖向 两级手风琴 TAB 栏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Highcharts柱形范围图使用示例

    功能需求:统计三种不同的状态在一天的时间段里面所占的范围 第一步:引入highcharts.js和highcharts-more.js文件 引入文件文件源码:下载https://img.hcharts ...

  9. 【剑指Offer面试题】九度OJ1384：二维数组中的查找

    下决心AC全部剑指offer面试题. 九度OJ面试题地址:http://ac.jobdu.com/hhtproblems.php 书籍:何海涛--<剑指Offer:名企面试官精讲典型编程题> ...

  10. 高性能计算机传奇（vamei）

    高性能计算机是用网络将多台计算机连接在一起.并构成一个统一的系统,从而拥有远超个人电脑的计算能力.这样利用网络,让计算机合作工作的并行系统又称为集群(cluster).server.分布式计算机.超级 ...