【技术】图片预览不求人，原生 JavaScript 来帮你

最新推荐文章于 2024-07-17 09:44:02 发布

Riu_Peter

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量118

点赞数

分类专栏： Web JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/m0_43453853/article/details/120828994

版权

Web 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

【技术】图片预览不求人，原生 JavaScript 来帮你

HTML页面准备
JavaScript 脚本

HTML页面准备

准备一个 div 容器，用于显示图片。使用文件输入框组件，选择本地图片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<!-- 文件组件：选择本地文件 -->
			<input type="file" onchange="showPhoto(this)"/>
			<!-- 存放图片的容器 -->
			<div class="img" style="width: 500px; height: auto;"></div>
		</form>
	</body>
</html>

JavaScript 脚本

给文件输入框组件绑定 onchange 事件，调用 showPhoto方法，并把当前文件组件传递给方法。
方法内获取文件组件内容，通过 FileReader 对象读取文件。读取成功时，将获取到的图片数据设置到 img 标签即可，重点是 src 属性

<script>
	function showPhoto(obj) {
		// 获取文件
		var file = obj.files[0];
		// 创建读取文件组件(JS内置对象)
		var fr = new FileReader();
		// 读取文件
		fr.readAsDataURL(file);
		// 当数据读取完成的触发一个事件
		fr.onload = function () {
			// 获取文件数据
			var url = fr.result;
			console.log(url);
			
			var img = '<img src="'+url+'" style="width:100%;height:100%"/>';
			
			document.querySelector(".img").innerHTML=img;
		}
	}
</script>

Riu_Peter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【技术】图片预览不求人，原生 JavaScript 来帮你

【技术】图片预览不求人，原生 JavaScript 来帮你HTML页面准备JavaScript 脚本HTML页面准备准备一个 div 容器，用于显示图片。使用文件输入框组件，选择本地图片。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action=""
复制链接

扫一扫