图片上传并回显
效果图:
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;
}