Sring3MVC页面无刷新上传文件

    首先，这个框架是利用Ajax与Ctroller进行表单提交和数据交互的，但是Ajax是无法支持File上传的，所以在这里我使用了隐藏的Iframe来做文件上传的数据交互。（嘿嘿，是新手哦，有什么没说正确的，请大虾们指点指点）

1.配置Spring

支持web应用程序的文件上传功能，是由spring内置的即插即用的MultipartResolver来实现的，这些解析器都定义在org.springframework.web.multipart包里。下面将使用 CommonsMultipartResolver解析器来实现简单的文件上传功能。

基于项目的要求，我这里是在app-context.xml配置的：

 

  1. <!-- 上传文件 --> 
  2.     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
  3.         <!-- 以字节为单位的最大上传文件的大小 --> 
  4.         <property name="maxUploadSize" value="9999999999999" /> 
  5.     </bean> 

 

 

2.创建一个controller（控制器）来处理文件上传请求，FileUploadController.java：

 

  1. @Controller //声明该类为控制器类  
  2. public class FileUploadController implements ServletContextAware{ //实现ServletContextAware接口，获取本地路径  
  3.  
  4.  private ServletContext servletContext;  
  5.  
  6.  public void setServletContext(ServletContext servletContext) { //实现接口中的setServletContext方法  
  7.   this.servletContext = servletContext;  
  8.  }   
  9. @RequestMapping("")  
  10.   public void uploadTransferFile(@RequestParam("fileUpload") CommonsMultipartFile mFile,  
  11.                                  @RequestParam(value="file_ID", required = true, defaultValue = "") String file_ID,  
  12.                                  Writer writer  
  13.                                  ) throws Exception {  
  14. BaseModel outModel = new BaseModel();  
  15.     // 获取登录信息  
  16.     SerUser serUser = GlobalThreadLocal.getSerUserInfo();  
  17.     if (serUser == null) {  
  18.       writer.write(showFileMsg("您未登录或登录过期，请重新登录！"));  
  19.       return;  
  20.     }  
  21.     //验证文件大小  判断是否小于10M  
  22.     long size = mFile.getSize();  
  23.     if(size / 10 > 1024*1024) {  
  24.       writer.write(showFileMsg("对不起，您上传的文件太大，请重新上传"));  
  25.       return;  
  26.     }  
  27.     //验证文件类型  
  28.     String fileType = mFile.getOriginalFilename().substring(mFile.getOriginalFilename().lastIndexOf("."), mFile.getOriginalFilename().length()).toLowerCase();  
  29.     //上传文件  
  30.     DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSSS");  
  31.     String fileName =  file_ID + "_" + df.format(new Date());  
  32.     //  
  33.     if(mFile.isEmpty()){  
  34.       writer.write(showFileMsg("上传失败！"));  
  35.       return;  
  36.     }  
  37.     //  
  38. //    String path = this.servletContext.getRealPath(merchantConfig.getFileUploadPath());  //获取本地存储路径  
  39.     String path = merchantConfig.getFileUploadPath() + "/TransferBill/";  
  40.     File filePath = new File(path);  
  41.     //如果文件夹不存在则创建       
  42.     if(!filePath.isDirectory())        
  43.     {         
  44.       filePath.mkdir();      
  45.     }    
  46.     File file = new File(path + fileName + fileType); //新建一个文件  
  47.     try {  
  48.      mFile.getFileItem().write(file); //将上传的文件写入新建的文件中  
  49.     } catch (Exception e) {  
  50.      logger.debug("exception:",e);  
  51.      writer.write(showFileMsg("上传失败！发生异常："+e.getMessage()));  
  52.      return;  
  53.     }  
  54.     //提交路径  
  55.     String fileUrl = merchantConfig.getFileUploadPath().substring(11,merchantConfig.getFileUploadPath().length()) + "/TransferBill/" + fileName + fileType;  
  56.     riskManager.uploadTransferFileUrl(file_ID, fileUrl);  
  57.     //  
  58.     writer.write(showFileMsg("文件上传成功！"));  
  59.     outModel.setRetCode(BaseModel.RET_OK);  
  60.     return; 

这里是写一个Writer来调用JSP页面的一个JS函数：

 

  1. /**  
  2.  * 文件上传返回消息  
  3.  * @param msg  
  4.  * @return  
  5.  */ 
  6. public static String showFileMsg(String msg) {   
  7.   String result = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /></head><body>" +  
  8.       "<script language=JavaScript>window.parent.fileUploadSuccessCallBack('"+ msg +"');</script>" +  
  9.           "<body></html>";  
  10.   return result;  
  11. } 

 

3.JSP页面（这里是重点）

主要是在这个JSP页面加一个隐藏的Iframe：

 

  1. <iframe name="hideIframe" style="display:none"></iframe> 

然后在文件上传的表单里使用这个隐藏的Iframe来做表单返回的页面：
 

  1. <form id="fileForm" action="${ctx}/risksys/" enctype="multipart/form-data" method="post" target="hideIframe"> 
  2.                 <input type="hidden" id="file_waybillId" name="file_waybillId" value="'+waybillId+'" /> 
  3.                 <table width="350" border="0" cellpadding="0" cellspacing="0"> 
  4.                 <tr><td width="300" class="dingdan_shahu"></td> 
  5.                 <td class="order_xx"></td></tr> 
  6.                 <tr><td class="dingdan_shahu">上传文件：</td> 
  7.                 <td class="order_xx"><span id="showFile"><input type="file" name="fileUpload" id="fileUpload" /></span></td></tr> 
  8.                 <tr><td class="dingdan_shahu"></td>'+  
  9.                 <td class="order_xx"><span style="color:red;">*注：文件大小请控制在10M以内</span> 
  10.                 </td></tr> 
  11.                 </table></form> 

4.JS代码

这里是被调用的函数：

 

  1. //  
  2.     function fileUploadSuccessCallBack(msg) {  
  3.         removeLoading(true);  
  4.         getInfo(msg);  
  5.         findPage(currentPageNo);  
  6.     }