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. Codeforces Round #262 (Div. 2) 题解

    A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. Android控件ToggleButton的使用方法

    ToggleButton(开关button)是Android系统中比較简单的一个组件,是一个具有选中和未选择状态双状态的button.而且须要为不同的状态设置不同的显示文本. ToggleButton ...

  3. 浅析.Net数据操作机制

    举个栗子,获取新闻详情的案例. public ActionResult NewsView(int newsId) { var news = _newsService.GetNewsById(newsI ...

  4. 小项目: low版本的 员工信息程序:

    ### 附加两个文件1 user_info 和worker_info flag = False def logon(): #登录函数 global flag usr = input('Username ...

  5. IOS应用在ios7（iPhone5／iPhone5s）上不能全屏显示

    前言 [IOS应用在iOS7系统或者iPhone5/iPhone5s上不能全屏显示,应用画面上下各有1条黑色,但是在其他系统或者型号的手机上却是正常显示 Paste_Image.png Paste_I ...

  6. HTML5多维度数据分析

    详情:http://echarts.baidu.com/index.html

  7. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  8. RLF。HRLF解释

  9. 洛谷——P1311 选择客栈

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

  10. VPS搭建与IPv6使用教程

    VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...