这种方法需要提交form表单,再跳转页面(没有第一种方法好):
一、JSP代码:
<div class="tphoto" name="head_img" id="head_img"> <input type="file" name="file" onchange="previewImage(this)" /> <div id="preview"> <img id="imghead" border=0 src=‘${ctx}/static/images/elearning/photo_teacher.png‘> </div> </div>
二、JS代码:
//图片上传 function previewImage(file) { var MAXWIDTH = 100; var MAXHEIGHT = 100; var div = document.getElementById(‘preview‘); if (file.files && file.files[0]){ div.innerHTML = ‘<img id=imghead>‘; var img = document.getElementById(‘imghead‘); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; img.style.marginLeft = rect.left+‘px‘; img.style.marginTop = rect.top+‘px‘; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else { var sFilter=‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="‘; file.select(); var src = document.selection.createRange().text; div.innerHTML = ‘<img id=imghead>‘; var img = document.getElementById(‘imghead‘); img.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =(‘rect:‘+rect.top+‘,‘+rect.left+‘,‘+rect.width+‘,‘+rect.height); div.innerHTML = "<div id=divhead style=‘width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"‘></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); } else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; }
三、后台Java代码:
/** * * @Title: insert * @Description: 新增 * @param @param params * @param @param request * @param @return * @return MessageResp * @throws */ @RequestMapping("/insert") public ModelAndView insert(Model model, TrainerQueryParam params, HttpServletRequest request, MultipartFile file) { ModelAndView view = new ModelAndView(); User u = SessionUtils.getUser(request.getSession()); /** * 把前端传过来的参数对象中要更新的属性转到model实体类相应的字段属性中, 可以通过通用的转化实现 * */ Trainer trainer = new Trainer(); try { BeanUtils.copyProperties(trainer, params);//前面的是目标,后面的是源对象 } catch (IllegalAccessException e) { throw new AjaxBusinessException("新增出错!"); } catch (InvocationTargetException e) { throw new AjaxBusinessException("新增出错!"); } trainer.setId(UUIDUtil.getUUID()); //ID trainer.setCorpId(SessionUtils.getCorpId(request.getSession())); try { if(!file.isEmpty()){ //获得工程下面upload资源包路径,当然这个包是已经存在的了 String path = request.getSession().getServletContext().getRealPath("upload/trainer_picture"); //上传的图片的名称 String fileName = file.getOriginalFilename(); String newfileName = UUIDUtil.generateGUID() + fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); //下面是upload路径盘符的转化 StringBuffer importPath = new StringBuffer(); String temp[] = path.split("\\\\"); for (int i = 0; i < temp.length; i++) { importPath.append(temp[i]); importPath.append("/"); } importPath.append(newfileName); //看是否存在upload包,没有则会新建一个upload包,作为资源上传的路径 File targetFile = new File(path, newfileName); if (!targetFile.exists()) { targetFile.mkdirs(); } //文件上传 file.transferTo(targetFile); trainer.setHeadImg(newfileName); } if (trainerService.insert(trainer) == 1) { resp.setResult("true"); resp.setResultDesc("新增成功!"); } } catch (Exception e) { resp.setResult("false"); resp.setResultDesc("新增出错!"); } //model.addAttribute("trainerResp", trainerResp); //model.addAttribute("srList", srList); view.setViewName("views/xxx/manage/xxxinfo"); return view; }
时间: 2024-11-01 16:31:33