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

最新推荐文章于 2024-03-31 21:48:35 发布

原创最新推荐文章于 2024-03-31 21:48:35 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

pc 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的图片上传及预览功能的实现方法，包括HTML页面结构、JavaScript脚本处理图片上传预览和替换默认图片的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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样式自己写吧，，

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