Form表单多文件改名ajax提交上传及java后台处理

1.前端代码(jsp页面)


<form id="uploadForm" name="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file" accept="image/*"  multiple="multiple" value="" />
    <input id="btn-upload" type="button" value="上传" οnclick="imageUpload();">
</form>


<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/ajaxfileupload.js"></script>


<script type="text/javascript">


     //对Date的扩展，将 Date 转化为指定格式的String
     Date.prototype.Format = function (fmt) {  
     var o = {
         "M+": this.getMonth() + 1, //月份 
         "d+": this.getDate(), //日 
         "h+": this.getHours(), //小时 
         "m+": this.getMinutes(), //分 
         "s+": this.getSeconds(), //秒 
         "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
         "S": this.getMilliseconds() //毫秒 
     };
     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (var k in o)
     if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
     return fmt;
  }
     //多文件上传(极速模式获取的是文件名,ie获取到的是文件路径,getFileName()截取ie下路径从而得到文件名)
     function imageUpload(){
       var uuid = new Date().Format("yyyyMMddhhmmss");//根据时间来自动生成uuid，保证生成的id是唯一的 
   var files = document.getElementById("file").files;// 获取文件对象
   alert(files.length);
   var formdata = new FormData();
   if(files.length>0){
    for(var i = 0;i<files.length;i++){
     //formdata.append('file',files[i]);
     //formdata.append('file',files[i],uuid+i+'_'+getFileName(i));
     formdata.append('file',files[i],uuid+i+'_'+files[i].name);
    }
   }        
   $.ajax({
    url : "${pageContext.request.contextPath}/info/upload", 
    type : "post",         
    //data: new FormData($('#uploadForm')[0]),
    data : formdata,   
    cache: false,
    processData: false,
    contentType: false,
    //contentType:multipart/form-data,
    //dataType: "jsonp",
    dataType: "text",
    async:false,// false,设置为同步传输  ，默认异步传输true
         success: function (data){
          alert("上传成功");         
                $("#picList").val(data);    //要保存的图片地址
                alert(data);  
         },  
         error: function (XMLHttpRequest, textStatus, errorThrown) {  
             alert("上传失败!");
       alert(XMLHttpRequest.status);
    alert(XMLHttpRequest.readyState);
    alert(textStatus); 
         } 
      });     
     }


</script>


2.配置文件


(1)基于CommonsMultipartResolver


pom.xml(maven配置jar包)


<dependency>
     <groupId>org.apache.commons</groupId>
     <artifactId>commons-io</artifactId>
     <version>1.3.2</version>
 </dependency>
 <dependency>  
            <groupId>commons-fileupload</groupId>  
            <artifactId>commons-fileupload</artifactId>  
            <version>1.3.1</version>  
 </dependency> 


 springmvc-config.xml


<bean id = "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        
        <property name="defaultEncoding">
         <value>utf-8</value>
        </property>
        <property name="maxUploadSize">  
            <value>10484880</value>  
        </property>  
        <property name="maxInMemorySize">   
            <value>1024</value>   
        </property>   
</bean>


(2)基于StandardServletMultipartResolver


web.xml


<context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:/applicationContext.xml</param-value>


</context-param> 
  <servlet>
    <servlet-name>annomvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <init-param>
           <param-name>contextConfigLocation</param-name>
           <param-value>classpath:/springmvc-config.xml</param-value>
        </init-param>    
    <load-on-startup>1</load-on-startup>
    <async-supported>true</async-supported> 
    <multipart-config> 
      <!--临时文件的目录-->  
      <location>D:/temp/</location>
      <!-- 上传文件最大10M -->        
      <max-file-size>12328960</max-file-size> 
      <!-- 上传文件整个请求不超过100M --> 
      <max-request-size>123289600</max-request-size>  
     </multipart-config>  


  </servlet>






 springmvc-config.xml


<bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver" />


3.java后端代码


/***
  * 多文件上传(基于CommonsMultipartResolver)
  * @param request
  * @param multipartfiles
  * @return
  * @throws IOException
  */
 @ResponseBody
 @RequestMapping(value="/upload",method=RequestMethod.POST)   
 public String upload(HttpServletRequest request,@RequestParam("file") MultipartFile[] multipartfiles) throws IOException {  
  String dir = "";
  //保存文件的目录  
     String path = request.getSession().getServletContext().getRealPath("/attached/info")+"/";
     if(null != multipartfiles && multipartfiles.length > 0){  
          //遍历并保存文件  
          for(MultipartFile file : multipartfiles){ 
    String fileName = file.getOriginalFilename();
          File savePath = new File(path,fileName);
          if (!savePath.exists()) {
           savePath.mkdirs();
       }
          file.transferTo(savePath);
             dir = dir + savePath.getAbsolutePath() + "|";
             //System.out.println(dir);
           }  
     } 
     System.out.println(dir);
     return dir;  
   }


/***
  * 多文件上传(基于StandardServletMultipartResolver)
  * @param request
  * @param response
  * @param model
  * @throws Exception
  */


@ResponseBody
 @RequestMapping(value="/upload",method=RequestMethod.POST)  
 public void upload(HttpServletRequest request,HttpServletResponse response,Model model) throws Exception{       
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");        
        String savePath = request.getSession().getServletContext().getRealPath("/attached/info")+"/";
        Collection<Part> parts = request.getParts();         
        // 遍历所有的表单内容，将表单中的文件写入上传文件目录
        for (Iterator<Part> iterator = parts.iterator(); iterator.hasNext();) {         
            Part part = iterator.next();            
            // 从Part的content-disposition中提取上传文件的文件名
            String fileName = getFileName(part);             
            if (fileName != null) {
                part.write(savePath + File.separator + fileName);
            }
        }
        response.getWriter().write("true");
        response.getWriter().close();
    }
 String fileNameExtractorRegex = "filename=\".+\"";
 private String getFileName(Part part) {         
        String fileName = null;
        // 获取header信息中的content-disposition，如果为文件，则可以从其中提取出文件名
        String cotentDesc = part.getHeader("content-disposition");
        Pattern pattern = Pattern.compile(fileNameExtractorRegex);         
        Matcher matcher = pattern.matcher(cotentDesc);         
        if (matcher.find()) {
            fileName = matcher.group();
            fileName = fileName.substring(10, fileName.length() - 1);
        }
        return fileName;
    }