H5API：FileReader对象文件读取=文字和图片

本文介绍了如何使用H5 API中的FileReader对象进行文件读取操作，包括文件选择事件file.onchange、创建FileReader对象、读取文件如readAsDataURL用于图片读取和readAsText用于文本读取，以及在文件读取完成后通过onload事件获取reader.result来实现文件内容的预览和展示。

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

1.使用文件预览选择文件

file.onchange：文件发生改变事件

2.创建FileReader对象

var reader = new FileReader;

3.读取文件

reader.readAsDataURL() 读取图片

reader.readAsText() 读取文本

4.获取读取内容

reader.onload：文件读取完成事件

reader.result ：文件读取完成后的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="file" />	<!-- multiple 可以选择多个文件 -->
	<p id='txt'></p>
	<img id='url' src="" alt="" width="100px" height='100px' />
	<script type="text/javascript">
		var file = document.querySelector('input');
		var Types;
		file.onchange = function(){
			//文件选择器 file 里面files数组中，包含的就是选择文件的所有属性 
			//初始化一个 reader对象
			var reader = new FileReader;

			//判断文件类型
			if (this.files[0].type.indexOf('image') != -1) {		//图片类型
				reader.readAsDataURL(this.files[0]);	//使用reader对象读取图片内容
				Types = 'image';
			} else if (this.files[0].type.indexOf('text') != -1) {	//文本类型
				reader.readAsText(this.files[0]);		//使用reader对象读取文本内容
				Types = 'text';
			} else {	//其它类型
				alert("不支持的文件");
				return;
			}
			
			
			

			//读取完成以后获取内容
			reader.onload = function() {
				if (Types == 'image') {		//图片类型
					let url = document.querySelector('#url');
					url.src = reader.result;			//reader.result是reader对象读取以后的内容-只读
				} else if (Types == 'text') {	//文本类型
					let txt = document.querySelector('#txt');
					txt.innerHTML = reader.result;		//reader.result是reader对象读取以后的内容-只读
				}
				

				
			}
		}
	</script>
</body>
</html>