图片上传，回显本地图片

最新推荐文章于 2024-07-04 16:48:49 发布

大毛啊

最新推荐文章于 2024-07-04 16:48:49 发布

阅读量1.7k

点赞数 1

分类专栏： Jquery HTML 文章标签：上传后显示本地图片上传图片后显示缩略图

大毛啊

本文链接：https://blog.csdn.net/s1101356835/article/details/102633476

版权

Jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

自己写的比较简单

界面展示：

1.点击图片，调出文件选择框

2.调出文件选择框，选择文件

3.显示本地图片

HTML代码：

    <body>
		<form>
			<!-- 文件选择框 默认关闭 点击图片后调出 -->
			<input type="file" name="currImg" id="currImg" style="display: none;"/>
		</form>
		<center>
			<!-- 把图片当作按钮，点击后调出文件选择框 -->
			<img id="imgBtn" src="img/2.jpg" width="180px" style="margin-top:25vh ;">
		</center>
	</body>

JS代码：（依赖-jquery-3.2.1.min.js）

<script type="text/javascript">
		$(function(){
			//图片被点击后拉起文件选择框
			$('#imgBtn').click(function(){
				$('#currImg').click();
			});
			//选取文件后回显当前显示图片
			$('#currImg').change(function(e){
				//当前选择的文件
				var currImg = e.target.files[0];
				//生成一个图片路径(使用URL.createObjectURL将选择的图片生成一个路径)
				var imgSrc = URL.createObjectURL(currImg);
				//更换原图片路径，回显图片
				$('#imgBtn').attr('src',imgSrc);
			});
		})
	</script>