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="上传" onclick="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 fm
a93e
t;

  }

     //多文件上传(极速模式获取的是文件名,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;

    }