FileReader对象实现图片预览效果(DataURL)

参考博客：https://blog.csdn.net/jackfrued/article/details/8967667

参考博客：https://blog.csdn.net/joyce_lcy/article/details/77885448

思路：

1.通过<input type="file" />上传图片

2.创建FileReader实例，调用readAsDataURL方法，将input中图片转化为base64格式的字符串（通过event.target.result获取）

3.添加到<img>中的src即可

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input id="uploadImg" type="file" onchange="processImg(this)" />选取图片
	<img id="renderImg" src="">

	<script type="text/javascript">
		var uploadImg = document.querySelector("#uploadImg");
		var renderImg = document.querySelector("#renderImg");
		
		function processImg (_this) {
			var filereader = new FileReader();
			filereader.readAsDataURL(_this.files[0]);

			filereader.onload = function (event) {
				// 图片转成base64编码
				var base64Img = event.target.result
				renderImg.setAttribute('src', base64Img)
			}
		}
	</script>
</body>
</html>

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 等格式的文件。

扫描二维码关注公众号，回复： 2520071 查看本文章

以下代码是读取.txt文本文件，并输出文本内容，调用了readAsText方法

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input id="uploadImg" type="file" onchange="processTxt(this)" />选取文本

	<script type="text/javascript">
		var renderImg = document.querySelector("#renderImg");

		// 读取文本
		function processTxt (_this) {
			var filereader = new FileReader();
			filereader.readAsText(_this.files[0]);
			filereader.onload = function (event) {
				console.log(event.target)
				console.log(event.target.result)
			}
		}
	</script>
</body>
</html>

再仔细研究下上传后的文件

<input type="file" name="" onchange="uploadImg(this)">

function uploadImg(_this) {
	console.log(_this.files[0]);
	return;
}

在控制台可以看到改文件的相关信息，如文件最后修改时间、名称、大小、类型

上面函数中，可以通过_this.files[0].type获取文件的格式，同理可以获得其他属性~

DataURL学习

参考博客：https://www.cnblogs.com/xuechenlei/p/5940371.html

DataURL取代t图片资源有什么好处?

DataURL嵌入HTML，与HTML一起被加载，从而减少了对服务器的请求（如果是图片，即为外部资源，需要额外向服务器进行请求）

缺点呢？DataURtL的体积会比原始的图片大1/3，并且浏览器不会缓存HTML，HTML中的DataURL也不会被缓存，每次都需要重新请求。但浏览器会缓存CSS文件，把DataURL写入CSS文件中，能解决缓存问题~

FileReader对象实现图片预览效果(DataURL)

猜你喜欢