前端页面要上传的图像显示

html

<div>
	<div id="pic_container">
		<label for="device_pic" id="label_pic">
			<!--这是我自己设置的默认图片-->
			<img src="myassets/img/add.svg">
		</label>
	</div>
	<input type="file" id="pic">
	<p class="help-block">上传图片</p>
</div>

---

#pic_container{
	width: 200px;
    height: 200px;
}

#label_pic{
    border: 1px solid gainsboro;
    width: inherit;
    height: inherit;
}

#label_pic img{
    width: inherit;
    height: inherit;
    object-fit: contain;
    object-position: center;
}

---

jquery

$("#pic").change(function () {
	let fileList = this.files
	for (i = 0; i < fileList.length; i++) {
		$("#label_pic img").attr("src", URL.createObjectURL($(this)[0].files[i]))
	}
}

---

效果图：