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. iOS项目开发实战——学会使用TableView列表控件（二）

    要在iOS开发中使用TableView列表控件,不仅能够直接使用TableViewController作为整个主界面,并且还能够使用TableView控件来实现.使用TableView能够进行很多其它 ...

  2. stl--vector 操作实现

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  3. 带你彻彻底底弄懂Scroller

    Scroller的使用 这是一个滑动帮助类.并不能够使View真正的滑动,而是依据时间的流逝.获取插值器中的数据.传递给我们.让我们去配合scrollTo/scrollBy去让view产生缓慢滑动,产 ...

  4. Mysql主从级联复制

    场景1 如果主节点已经运行了一段时间,且有大量数据时,如何配置并启动slave节点 通过备份恢复数据至从服务器· 复制起始位置为备份时,二进制日志文件及其POS: Mater 设置 1) 修改配置文件 ...

  5. 00084_Map接口

    1.Map接口概述 通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同. (1)Collection中的集合,元素是孤立存在的(理解为单身),向集 ...

  6. 【2017 Multi-University Training Contest - Team 2】 Regular polygon

    [Link]: [Description] 给你n个点整数点; 问你这n个点,能够组成多少个正多边形 [Solution] 整点只能构成正四边形. 则先把所有的边预处理出来; 枚举每某两条边为对角线的 ...

  7. 图片工具GraphicsMagick的安装配置与基本使用

    本文使用GraphicsMagick的版本为1.3.18 (Released March 9, 2013). 1.简介 GraphicsMagick是一个短小精悍的的图片处理工具和库集合.对于Java ...

  8. 项目EasyUi和JS中遇到的问题总汇

    近期因为项目用到EasyUi,曾经仅仅是听过,可是没有详细用过.仅仅能一边学一边做.如今将做的过程中遇到的一些难点总结例如以下,以备后用: EsayUi使用: Json格式:key:value,key ...

  9. Java遍历目录下全部文件并替换指定字符串

    应用场景:比方有一个深层次的文件目录结构,如:javaAPI 每一个文件中面都有同样的内容,而我们要统一改动为其它内容.上千个文件假设一个个改动显得太不明智. import java.io.Buffe ...

  10. 终结者：借助pinyin4j相关jar包提取汉字的首字母

    import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCase ...