jq显示图片

input文件对象，选中后显示图片

<div class="headerdiv">
				<label for="male">
					<img id="himg" src="img/vipcard.png"/>
				</label>
				<input type="file" hidden="hidden" accept="image/jpg,image/png,image/gif, image/jpeg" name="male" id="male" value="" />
			</div>

.headerdiv{
			width: 100%;
			height: 100%;
			padding: 11px;
			text-align: center;
		}
		.headerdiv>label{
			width: 100%;
			height: 100%;
		}
		.headerdiv>label>img{
			width: 80%;
			height: auto;
			border-radius: 7px;
			
		}

//监听文件改变 设置图片
				$("input[name=male]").bind("change",function(){
					console.log(this.files[0]);
					$("#himg").attr("src",URL.createObjectURL($(this)[0].files[0]));
					
				})

只要简单的几行代码，就可以将图片显示

 

 

如果感兴趣，也可以关注我的微信公众号，因为刚起步，所以只有几篇文章，之后会慢慢更新。