页面部分,用一个简单的form表单提交文件,将图片或文件提交到服务端。一个输入框,用于输入图片的最终名称,一个file文件选择,用于选择图片。
页面代码如下:
<form id="form1" > <table style="100%;border:0;"> <tr> <th style="35;text-align: center;" class="must">图片名称:</th> <td><input id="imgName" style="150px;" name="imagePath" verify="true" mustFill="true" maxlength="100" /></td> </tr> <tr id="fileSelect"> <th></th> <td> <input type="file" name="file" id="doc" style="150px;" onchange="javascript:setImagePreview(this);"> </td> </table> </form>
js部分,发送一个ajax请求,先检查名称是否重复。没有重复才设置form的action,然后提交表单。代码如下:
//发送检查名称是否重复的后台函数的请求,可以忽略 $.ajax({url:"<%=contextPath%>/imageUploadController/imageExistCheck",type:'POST',dataType:'json',data:data ,success:function(msg){ if(msg.result==false&&$("#saveOrUpdata").val()!="1"){ alert("名称重复,请修改名称"); return 0; }else{//没重复或者要修改 //下面这个if用于验证表单必填项是否都填了,忽略。 if(Common.verify($("#createForm"))){ //设置form的action $('#form1').attr('action', '<%=contextPath%>/imageUploadController/imageUpload'); $("#form1").submit(); } } },error:function(xhr){alert('错误 '+xhr.result);}}); return false; });
最后是后台代码,解释都放在注释里,更便于观看。
@RequestMapping(value="/imageUpload",method=RequestMethod.POST) public String upLoadImage(FireEquipmentInfo fireEquipmentInfo,HttpServletRequest req){ //转化request MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req; MultipartFile multipartFile = multipartRequest.getFile("file"); //获取原文件名 String fileName = multipartFile.getOriginalFilename(); //获取原名后缀 String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase(); String realName =null; //获取项目根目录 String imagePath=req.getSession().getServletContext().getRealPath("/"); String imageName=null; imageName=RequestUtil.getStringParameter(req, "imagePath"); //拼接路径和最终名 imagePath+="img/login/"; realName=imageName+ "." + fileEnd; try { //实例化一个file File file = new File(imagePath); //创建路径 if(!file.exists()) file.mkdirs(); //创建文件 file=new File(imagePath+"/"+realName); file = new File(imagePath,realName); //文件存储 multipartFile.transferTo(file); } catch (Exception e) { req.setAttribute("msg", e.getMessage()); }