图片上传并回显

最新推荐文章于 2025-03-18 17:25:41 发布

原创最新推荐文章于 2025-03-18 17:25:41 发布 · 627 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#图片上传并回显 #上传 #单图片上传 #图片上传

上传专栏收录该内容

1 篇文章

订阅专栏

效果图：
在这里插入图片描述

css部分：

#oDiv{
	height:200px;
	width:200px;
	border:1px solid #000;
	text-align: center;
	margin-bottom: 10px;
}

html部分：

<div id="oDiv"></div>
<form id="importForm" action='<c:url  value="/adminlive/upload.shtml" />' method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" id="oInput" name="file" value="" />
<input id="btnImportSubmit" class="btn btn-primary" type="submit" value="   保存   "/>
</form>

js部分：

document.getElementById("oInput").addEventListener("change",function(e){
		var files = this.files;
		var img = new Image();
		var render  = new FileReader();
		render.readAsDataURL(files[0]);
		render.onloadstart = function(){
		};
		render.onload = function(){
			img.src = this.result;
			img.style.height = "100%";
			img.style.width = "100%";
			var oDiv = document.getElementById("oDiv");
			oDiv.innerHTML = "";
			oDiv.appendChild(img);
		};
		render.onloadend = function(){
		}
	});

java部分：

@RequestMapping(value = "upload", method = RequestMethod.POST)
	public String importFile(PbdElecBasOldMenPhotoParameter parameter,MultipartFile file,
			RedirectAttributes redirectAttributes,HttpServletRequest request,HttpServletResponse response,@ModelAttribute("eccomm_admin") SystemUser user) {
		PbdElecBasOldMenPhoto pbdElecBasOldMenPhoto=new PbdElecBasOldMenPhoto();
		try {
			pbdElecBasOldMenPhoto.setPhotodate(file.getBytes());
			pbdElecBasOldMenPhotoService.persist(pbdElecBasOldMenPhoto);
		} catch (IOException e) {
			System.err.println(e);
			e.printStackTrace();
		}
		return null;
	}