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. 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good

    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...

  2. C#中函数的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. single-page关于vue-router

    最近复习了vue,项目实战前有练手,做一个简单的单页面应用. 1.router-view就是我们渲染的组件,router-view被包裹在一个div中,一旦路由跳转,router-view就会被渲染为 ...

  4. C#开发 —— 异常处理

    System.ArithmeticException 在算术运行期间发生异常 System.ArrayTypeMismatchException 存储元素的实际类型与数组的实际类型不兼容而导致存储失败 ...

  5. Kinect 开发 —— 硬件设备解剖

    Kinect for Xbox: 360 不支持“近景模式” 三只眼睛 —— 红外投影机,RGB摄像头,红外深度投影头  —— 色彩影像中的每个像素分别与深度影像中的一个像素对应 四只耳朵 —— L形 ...

  6. nginx最新配置

    #user  nobody;worker_processes  1; #error_log  logs/error.log;#error_log  logs/error.log  notice;#er ...

  7. BZOJ5332: [Sdoi2018]旧试题(莫比乌斯反演)

    时光匆匆,转眼间又是一年寒暑…… 这是小 Q 同学第二次参加省队选拔赛. 今年,小 Q 痛定思痛,不再冒险偷取试题,而是通过练习旧 试题提升个人实力.可是旧试题太多了,小 Q 没日没夜地做题,却看不到 ...

  8. 003 python 注释/数据类型/运算符/输入输出/格式化输出

    集成开发环境 pycharm 工欲善其事,必先利其器 pycharm是具备一般的python ide的功能,同时呢支持调试,语法高亮,代码管理,智能提示 加快快发的速度,提高开发效率 注释 what ...

  9. 洛谷——P1311 选择客栈

    https://www.luogu.org/problem/show?pid=1311 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰 ...

  10. Android线程池(二)——ThreadPoolExecutor及其拒绝策略RejectedExecutionHandler使用演示样例

    MainActivity例如以下: package cc.vv; import java.util.concurrent.LinkedBlockingQueue; import java.util.c ...