点击图片上传，并且本地预览，删除使用默认图片

点击图片上传，并且本地预览

<div class="banner-showimg">
	<img id="img5" class="picture-img-photo" src="../img/u1783.jpeg"/>
	<div onclick="changeImg()" class="banner-img-delete compile-img-delete" id="delete">
		<img src="../img/sc1.png"/>
	</div>
</div>
<div class="upload-btn banner1-btn">
	<input type="file" id="file" name="upload_pic"	 class="filepath" onchange="changepic(this)" accept="image/jpg,image/png,image/PNG">
	<div class="upload-button">
	     <img src="../img/sc.png"/>上传图片
	</div>
	<div class="upload-button-hint">
						支持扩展名.jpg .png建议图片尺寸
	</div>
</div>

/*点击添加图片预览上传*/
function changepic(e) {
	f = document.getElementById('file').files[0];
	var fromdata = new FormData()
	fromdata.append('upload_pic', f)
	$.ajax({
		type: 'post',
		url: Config.img,
		dataType: 'json',
		contentType:false,
		processData: false,
		data: fromdata,
		success: function(data) {
			var imgUrl=data.data.upload_pic;
			$('#img5').attr('src',imgUrl);
		}
	})
};

/*点击删除按钮删除上传的图片，使用默认图片*/
function changeImg() {
	$("#img5").attr("src", "../img/u1678.png");
}
 

css样式自己写吧，，

<input type="file" id="file" name="upload_pic" class="filepath" onchange="changepic(this)" accept="image/jpg,image/png,image/PNG">

这个是以opacity: 0;形势隐藏了