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. NOIP2009 最优贸易(BFS)

    本题正解是tarjan.我没有去写 之前的代码是错误的不好意思,因为数据太弱一直没有发现. 相同还是两遍bfs,一次正向,一次反向.在正向的时候我们求出从起点走到各个点的最小值.在反向的时候求出从终点 ...

  2. spring 使用c3po连接池

    1 数据源:能够简单理解为数据的来源. 2 连接池:是缓存一定数量的数据库连接,当程序须要数据库连接的时候,直接在连接池中获取空暇的连接,使用完再放回连接池中,此连接又变成空暇状态,等待下一次连接. ...

  3. hdu 1875 畅通project再续（kruskal算法计算最小生成树）

    畅通project再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  4. ORA-06575: 程序包或函数 NO_VM_DROP_PROC 处于无效状态

    SQL> drop user aaa ;   drop user aaa   ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06575: 程序包或函数 NO_VM_DROP_P ...

  5. 通过Debug-->Attach to Process的方式来调试网站

    找到网站所对应的应用程序池

  6. Sco Unixware 7.1.3企业版服务器安装视频教程

    Sco Unixware 7.1.3企业版服务器安装视频教程 UnixWare 7.1.3是最先进的工业标准Intel和AMD处理器系统运行平台.UnixWare 7.1.3是关键业务解决方案的可靠基 ...

  7. chattr---文件隐藏属性

  8. 今日 SGU 5.6

    SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...

  9. ubuntu-文件管理、编辑

    1.创建单层文件夹 mkdir test 如果你想要创建多层文件夹,这时候你需要添加一个参数-p mkdir -p t1/t2/t3 如果你不加-p的话,它会提示说找不到目录 2.分屏查看内容 mor ...

  10. Linux下搭建JSP环境

    Linux下搭建JSP环境     作为一名Java EE系统架构工程师,经常需要搭配和建立JSP(Java Server Pages)的开发环境和运行环境,所以本人在平时的工作中积累了一些在Linu ...