HTML5学习笔记（4）——文件读取FileReader

最新推荐文章于 2024-07-06 08:00:00 发布

想成为大佬的鸭子

最新推荐文章于 2024-07-06 08:00:00 发布

阅读量273

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_41309331/article/details/96482887

HTML 专栏收录该内容

7 篇文章

订阅专栏

这篇博客主要介绍了HTML5中关于文件读取的相关知识，包括file表单的multiple属性、FileList对象、file对象的属性、MIME类型、Blob对象以及FileReader对象的使用方法和事件模型。通过案例展示了如何利用FileReader实现文件预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习这个版块的内容时，我发现自己对网络文件这一领域的知识了解得太少了，一时间也做不到去详细了解，但是我想先将一些比较易懂，并且可能比较实用的知识记录下来。更高深的知识有待以后深入学习。

file

（1）HTML5为file表单新添加了multiple属性，支持多个文件选择；

（2）为了方便用户在脚本方位这些选择的文件，HTML5提供了file对象和FileList对象：

file：表示file表单中每一个被选择的文件对象。file对象包含两个属性：name属性表示文件名，但不包括路径。lastModifiedDate属性表示文件的最后修改日期。

FileList：表示这些file对象的列表，代表用户选择的所有文件。

（3）文件存储在file表单元素的files属性中，它是一个数组。可以用.files的方式获取。

（4）onchange：onchange 事件会在域的内容改变时发生。可以在file表单中如下使用：

<input type="file" name="" id="" onchange = "fn();"/>

MIME 类型

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

Blob对象

HTML5新增Blob对象，代表原始二进制数据。除了存放二进制数据外，还可以设置数据的MIME类型，这相当于对文件的储存，其他很多二进制对象也是从这个对象继承的。例如上面的file对象也继承Blob对象，因此我们可以在文件域中访问Blob对象。它包含两个属性：

size：一个Blob对象的字节长度；

type：表示Blob的MIME类型。若未知则返回空字符串。

FileReader：读取文件内容

我们之前在获取一张图片内容的时候，常用的是

<img src="abc.jpg" alt="">

其中src用来指定路径，请求的是外部文件，一般来说是服务器的资源，因此它需要向服务器发送请求，这就意味着它占用着服务器的资源。因此，为了优化网站加载的速度和执行效率，HTML5提供了一个新的对象——FileReader。

方法：

方法	说明
readAsText(Blob,type)	将Blob对象或文件中的数据读取为文本数据，其中type参数表示编码方式，默认为UTF-8
readAsBinaryString(Blob)	可读取任意类型的文件，返回二进制字符串；这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
readAsDataURL(Blob)	读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL。 DataURL是一种将文件（这个文件一般是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中
abort()	中断读取

需要注意的是，这些方法都没有返回值，即void，但是读取完文件后，它会将读取的结果存储在文件读取的result中

事件模型

FileReader提供一个完整的事件模型，用来捕获读取文件时的状态

onabort	读取文件中断时触发
onerror	读取错误时触发
onload	文件读取成功时触发
onloadend	读取完成时触发，不论读取成功还是失败
onloadstart	开始读取时触发
onprogress	读取文件过程中持续触发

案例

一个简单的选择文件并在下方预览的案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<!--file表单，设置id方便获取元素，onchange表示有改动时触发事件-->
		<input type="file" name="file_name" id="file_name" onchange = "previewImg();"/><br/>
		<input type="submit" name="" id="" value="提交" /><br/>
		<!--提供预览的位置-->
		<img src="" alt="" width="400px" height="300px">
		<script>
			function previewImg(){
				//创建一个FileReader对象
				var reader = new FileReader();
				//获取文件file
				var file_img = document.querySelector("#file_name").files;
				//读取文件,获取DataURL
				reader.readAsDataURL(file_img[0]);
				//读取完以后触发
				reader.onload = function(){
					document.querySelector("img").src = reader.result;
				}
				
			}
		</script>
	</body>
</html>