Html+JQuery实现静态界面选择图片预览（未连接后台上传）

最新推荐文章于 2020-10-20 22:30:14 发布

幼儿园精英

最新推荐文章于 2020-10-20 22:30:14 发布

阅读量265

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/bo_03/article/details/104189891

版权

本人才疏学浅，欢迎各位前辈前来指导。

以下为全部代码

<html>
	<head>
		<meta charset="utf-8">
		<title>图片上传</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("input").change(function(){
					var imgnum = $(this).attr("data");
				    $("."+imgnum).attr("src",URL.createObjectURL($(this)[0].files[0]));
				});
			});
		</script>
		<style type="text/css">
			img{
				width: 150px;
				height: 150px;
				background: white;
				border: #e7e7e7 solid 2px;
				margin-right: 30px;
				border-radius: 10px;
			}
			.imgbox input{
				width: 150px;
				height: 150px;
				position: fixed;
				top: 20px;
				opacity:0;
				margin-right: 30px;
			}
		</style>
	</head>
	<body style="margin: 25px;">
		<div class="imgbox">
			<input type="file" data="img1">
			<img src="FileUpload.jpg" class="img1">
			<input type="file" data="img2">
			<img src="FileUpload.jpg" class="img2">
			<input type="file" data="img3">
			<img src="FileUpload.jpg" class="img3">
		</div>
	</body>
</html>

运行展示
上传前
在这里插入图片描述
上传后