FileReader文件读取操作(可用于身份证验证)

最新推荐文章于 2023-07-07 15:52:53 发布

我枯了你呢

最新推荐文章于 2023-07-07 15:52:53 发布

阅读量371

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/a73994/article/details/105252150

版权

FileReader文件读取操作

描述

1.FileReader是HTML5中新增的一个类
2.用来对input中(文件上传file类型)进行处理的类
3.通过该类创建的对象中提供了一些方法，能够对上传的文件进行(预先的读写)
4.从而在某种情况下实现"预览"效果。

说明

文件读取一般分为三种：
(1)文本读取
(2)图片URL读取
(3)二进制流读取

语法

var fileReader = new FileReader();
//获取本文的格式
fileReader.readAsText(从input元素中获得的文件流);
fileReader.onload = function (){
console.log(fileReader.result);
}
//读取图片url
fileReader.readAsDataURL(从input元素中获得的文件流);
fileReader.onload = function (){
console.log(fileReader.result);
}

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FileReader文件读取操作</title>
	<style>
		.showDiv {
			width: 300px;
			min-height: 50px;
			border: 1px solid black;
			padding: 10px;
			margin-top: 10px;
		}
		img {
			width: 300px;
		}
	</style>
</head>
<body>
	<input type="file" class="file" multiple>
	<button>上传文件</button>
	<div class="showDiv"></div>
	<img src="" alt="">
	<script>
		var fileInput = document.querySelector('.file');
		var btn = document.querySelector('button');
		var showDiv = document.querySelector('.showDiv');
		var img = document.querySelector('img');
		//
		btn.onclick = function (){
			var fileReader = new FileReader();
			
			//文本获取
			// fileReader.readAsText(fileInput.files[0]);
			// fileReader.onload = function (){
			// showDiv.innerHTML = fileReader.result;
			// }
			
			//图片路径读取
			fileReader.readAsDataURL(fileInput.files[0]);
			fileReader.onload = function (){
				img.src = fileReader.result;
			}
		}
	</script>
</body>
</html>