HTML 5 中FileReader的使用

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

,读取文件中的数据。

FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

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

<span style="font-family:Times New Roman;font-size:18px;">??		<script type="text/javascript">
			if(typeof FileReader == "undefined")
				alert("浏览器不支持FileReader");
			else
				alert("浏览器支持FileReader");
		</script></span>

2. 调用FileReader对象的方法

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

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

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

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

readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3. 处理事件

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

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

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

4. 使用示例

<span style="font-family:Times New Roman;font-size:18px;"><!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>
</span>

file控件中选择一个图片文件,并且点击读取图片数据按钮,运行结果如下图:

file控件中选择一个dll文件,并且点击读取二进制数据,运行结果如下图:

file控件中选择一个txt文件,并且点击读取文本文件,运行结果如下图:

时间: 2024-11-08 17:59:21

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

JAVA中FileReader类读取文件显示FileNotFoundException 异常的解决办法

最近在看一个生信JAVA小软件的源码,然后试着自己写一下,但是在读取文件的时候发现一直出现"找不到文件"的异常,检查了各种环境变量和目录,最后终于找到了问题所在.下面的具体的错误情况: import java.io.FileReader; public class Test{ public static void main(String[] args) { FileReader a = new FileReader("a.txt"); System.out.prin

API中FileReader 接口事件

FileReader 接口包含了一套完整的事件模型,用于捕获读取文件时的状态onabort        中断onerror        出错onloadstart    开始onprogress    正在读取onload        成功读取onloadend    读取完成(无论成功失败)

HTML5文件API之FileReader

在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); 文件预览:readAsText();(必须保证文件编码格式与代码编码格式相同,预览中文才不会乱码) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

JAVA中各种IO的关系及说明

JAVA中的IO以前看着太混乱了,现在梳理一下 1.IO流分为两大类,一个是以stream结尾的,叫做字节流,顾名思义,按照byte为单位进行传输:另一种是以reader和writer结尾的叫做字符流,它貌似是封装了stream结尾的 IO流类,而产生的另一种功能类似,但是传输介质不再是byte,而是字符,也就是说,根据传说字符的不同,比如UTF-8,GBK等,它的传输单位也不是固定的. 2.输入输出,输入指的是从文件向内存中进行读入,输出指的是,内存中的内容写出到文件中 3.常见的Buffer

[转]Java FileInputStream与FileReader的区别

在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和Reader.实际上, InputStream和Reader都是抽象类,并不直接地从文件或者套接字(socket)中读取数据.然而,它们之间的主要差别在于:InputStream用于读取二进制数据(字节流方式,译者注),Reader用于读取文本数据(字符流方式,译者注),准确地说,Unicode字符.

Java FileInputStream与FileReader的区别

在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和Reader.实际上, InputStream和Reader都是抽象类,并不直接地从文件或者套接字(socket)中读取数据.然而,它们之间的主要差别在于:InputStream用于读取二进制数据(字节流方式,译者注),Reader用于读取文本数据(字符流方式,译者注),准确地说,Unicode字符.

IO细述

Java IO1:IO和File IO 大多数的应用程序都要与外部设备进行数据交换,最常见的外部设备包含磁盘和网络.IO就是指应用程序对这些设备的数据输入与输出,Java语言定义了许多类专门负责各种方式的输入.输出,这些类都被放在java.io包中. File类 File类是IO包中唯一代表磁盘文件本身的对象,File类定义了一些与平台无关的方法来操作文件.通过调用File类提供的各种方法,能够完成创建.删除文件.重命名文件.判断文件的读写权限权限是否存在.设置和查询文件的最近修改时间等操作.

Java IO5:字符流

字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为上一篇文章写了,一个Unicode字符占用2个字节,而字节流一次只能操作一个字节.既然Java的口号就是"一次编写.处处运行",那么包含直接的字符输入/输出的支持是必要的.因此就有一些字符输入/输出流,之前已经说明过了,字符流顶层是Reader和Writer这两个抽象类,因此就从这里开始本文. Reader Reader

分布式计算——实现简单的浏览器和web服务器

此次是分布式的第三次作业,作业要求如下: 1.基于TCP通讯(ServerSocket.Socket套接字),编写一个带有图形用户界面的浏览器和 一个支持文档读取并返回给客户浏览器的web服务器.客户端支持超链接事件处理,服务器采用多 线程技术支持并发访问. 2.在此基础上,修改服务器侧设计与实现,使之能够动态地添加客户端请求的类文件,即设计 一个小服务程序容器. 3.试在服务器侧代码中对客户端请求行.请求头和请求体部分进行处理. ================================