js实现即时预览功能

最新推荐文章于 2024-07-01 02:17:25 发布

m0_51530332

最新推荐文章于 2024-07-01 02:17:25 发布

阅读量589

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_51530332/article/details/116904547

版权

实现即时预览功能需要用到H5新增的 web api–FileReader

FileReader对象

H5提供了 FileReader 对象用于读取文件或数据。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,
还可以是来自在一个HTMLCanvasElement上执行 mozGetAsFile() 方法后返回结果。
DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。
非特定于Firefox的非标准HTMLCanvasElement方法:
mozGetAsFile() 将返回一个基于内存的File对象，该对象表示画布中包含的图像。
此功能是非标准的，不要在面向Web的生产站点上使用它。

具体属性：

error: null		【错误信息】
onabort: null   【数据读取中断时触发】
onerror: null   【数据读取失败时触发】
onload: null    【数据读取成功时触发】
onloadend: ƒ ()   【数据读取完成时触发，无论是否成功】
onloadstart: null  【数据开始读取时触发】
onprogress: null   [数据读取过程中不断触发，可用于做进度条]
readyState: 0   【状态】
result: null    【初始化为null,读取数据后，该值为所获得的数据】

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{width: 300px;}
	</style>
</head>
<body>
	<form action="">
		<input type="file" id='filebtn' >
		<input type="submit">
	</form>
	<img src="" alt="">
	<script type="text/javascript">
		//初始化FileReader对象，用于读取用户选择的文件的数据
		var read = new FileReader();
		var filebtn = document.getElementById('filebtn');
		//当文件控件改变时触发
		filebtn.onchange = function () {
			//读取文件列表中的第一个文件
			//readASDateURL这个方法，可以读取一个file对象，并把数据以base64的格式填充到FileReader对象中的result属性中去。
			read.readAsDataURL(this.files[0]);
		}
		//FileReader提供了onloadend事件，来处理数据读取完成后该干些什么
		read.onloadend = function(){
			document.images[0].src = this.result;//将读取到的文件地址赋给第一个img标签
			console.log('读取完成')
		}
	</script>
</body>
</html>