1、form 头
enctype="multipart/form-data"
2、html
<td id="tp"> <c:if test="${pd.LOGO==''||pd.LOGO==null}"> <a class="photo_add">上传</a> </c:if> <c:if test="${pd.LOGO!=''&&pd.LOGO!=null}"> <img alt="" src="${pd.LOGO }" class="photo_img"> <a class="photo_add">修改</a> </c:if> </td>
<input type="file" id="LOGO" name="LOGO" onchange="fileType(this)" style="display: none;"> <input type="hidden" id="BEFORE_LOGO" name="BEFORE_LOGO" value="${pd.LOGO}">
3、js
$(function(){ $(".photo_add").on('click',function(){ $("#LOGO").click(); }); });
//过滤类型 function fileType(obj){ var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名 if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg'){ $("#tp").tips({ side:3, msg:'请上传图片格式的文件', bg:'#AE81FF', time:3 }); $("#LOGO").val(""); }else{ var file = document.getElementById('LOGO').files[0]; // 选择上传的文件 var r = new FileReader(); r.readAsDataURL(file); // Base64 $(r).load(function() { $('#tp').html('<img src="' + this.result + '" alt="" class="photo_img" /><a class="photo_add">修改</a>'); //增加点击事件 $(".photo_add").on('click',function(){ $("#LOGO").click(); }); }); } }
4、增加
@RequestMapping(value="/save") public ModelAndView save(MultipartHttpServletRequest request, @RequestParam(value="LOGO",required=false)MultipartFile icon) throws Exception{ logBefore(logger, "新增Tv_Show"); ModelAndView mv = this.getModelAndView(); PageData pd = new PageData(); pd = this.getPageData(); String iconPath=""; //上传LOGO图片 if(icon!=null&& !icon.isEmpty()){ iconPath=uploadImg(icon); } pd.put("LOGO", iconPath); pd.put("VIDEOCAST_ID", request.getParameter("VIDEOCAST_ID")); pd.put("NAME", request.getParameter("NAME")); pd.put("BROADCAST_DATE", request.getParameter("BROADCAST_DATE")); pd.put("DURATION", request.getParameter("DURATION")); pd.put("RATE", request.getParameter("RATE")); pd.put("START_TIME", request.getParameter("START_TIME")); pd.put("END_TIME", request.getParameter("END_TIME")); pd.put("ORDERS", request.getParameter("ORDERS")); pd.put("TV_SHOW_ID", this.get32UUID()); //主键 tv_showService.save(pd); mv.addObject("msg","success"); mv.setViewName("save_result"); return mv; }
5、修改
@RequestMapping(value="/edit") public ModelAndView edit(MultipartHttpServletRequest request, @RequestParam(value="LOGO",required=false)MultipartFile icon) throws Exception{ logBefore(logger, "修改Tv_Show"); ModelAndView mv = this.getModelAndView(); PageData pd = new PageData(); pd = this.getPageData(); String iconPath=""; //上传LOGO if(icon!=null&& !icon.isEmpty()){ iconPath=uploadImg(icon); pd.put("LOGO", iconPath); //删除原来图片 String BEFORE_LOGO=request.getParameter("BEFORE_LOGO"); DelAllFile.delFolder(PathUtil.getClasspath()+BEFORE_LOGO); //删除图片 } pd.put("TV_SHOW_ID", request.getParameter("TV_SHOW_ID")); pd.put("VIDEOCAST_ID", request.getParameter("VIDEOCAST_ID")); pd.put("NAME", request.getParameter("NAME")); pd.put("BROADCAST_DATE", request.getParameter("BROADCAST_DATE")); pd.put("DURATION", request.getParameter("DURATION")); pd.put("RATE", request.getParameter("RATE")); pd.put("START_TIME", request.getParameter("START_TIME")); pd.put("END_TIME", request.getParameter("END_TIME")); pd.put("ORDERS", request.getParameter("ORDERS")); tv_showService.edit(pd); mv.addObject("msg","success"); mv.setViewName("save_result"); return mv; }
6.css
<style type="text/css">
.photo_add{
cursor: pointer;
}
.photo_img{
40px;
}
</style>
7、controller 部分
/** * 上传图片 * @param file * @return 图片相对路径+文件名Map * @throws Exception */ private String uploadImg(MultipartFile file) throws Exception{ String folder = DateUtil.getDays(), fileName = ""; String filePath=""; String webPath=""; if (null != file && !file.isEmpty()) { filePath = PathUtil.getClasspath() + Const.FILEPATHIMG + folder; //文件上传路径 webPath=Const.FILEPATHIMG+folder; fileName = FileUpload.fileUp(file, filePath, this.get32UUID()); //执行上传 }else{ throw new Exception(); } return webPath+"/"+fileName; }
注释:修改对应的mapper 的时候
<if test="LOGO!='' and LOGO!=null"> LOGO= #{LOGO}, </if>
js校验图片非空的时候
if($("#LOGO").val()==""&&$("#BEFORE_LOGO").val()==""){ $("#tp").tips({ side:3, msg:'请输入节目logo', bg:'#AE81FF', time:2 }); $("#tp").focus(); return false; }