图片上传，回显本地图片

程序员文章站 2022-03-27 20:32:04

...

自己写的比较简单

界面展示：

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>