springmvc ajax 多個文件表單上傳

html代碼

<form id='addForm' class='form-horizontal'>

<div class="from-row">

                <input name="name" type="text">

               <input name="code" type="text">
                <div class="form-group">
                        <label class="col-md-2 control-label" style="width: 15%;">
                            附件<span style="color:red;">&nbsp;*</span>
                        </label>
                        <div class="col-md-4 ims_custom_form datetime_input">
                            <div id="uploadDiv"><input type="button" id="uploadBtn" value="添加文件">                               </div>
                            <div id="fileNameShowDiv"></div>  
                            <div id="fileDiv" style="display: none"></div>
                        </div>
                </div>
                <div class="clear"></div>

</div>

<!-- 解決IE10不兼容的bug，IE上傳時，後臺報錯，不能刪除 -->
<input type="hidden" name="test">

</form>

 

 

javascript代碼

$(function() {

       bindFileUpLoad()

});



/**
      * 綁定文件上傳
      */
     function bindFileUpLoad(){
         $("#uploadBtn").on("click",function(){
             var fileId =generateUUID(); 
             
             var length = $("#fileDiv input").length;
              if(length>=5){
                alertify.alert("最多隻能上傳五個附件");
                return ;
              }
             
             var uploadFile = '<input name="'+fileId+'" id="'+fileId+'" '
                 + 'class="weui-uploader__input" type="file" />';
             $("#fileDiv").append($(uploadFile));
             $("#"+fileId+"").bind("change",function(e){
                  //選擇文件以後的變化
                  var fileTempPath = e.target.value;
                  var fileName = fileTempPath.substring((fileTempPath.lastIndexOf("\\")+1),fileTempPath.length);
                  var fileObj = e.target;
                  if(!checkFileType(fileName)){
                      $(this).remove();
                      return;
                  }
                  
                  if(!checkFileSize(fileId)){
                      $(this).remove();
                      return;
                  }
                  
                  showCurUpLoadFile(fileId,fileName);
             });
             $("#"+fileId+"").click();        
         });
     }
     
     /**
      * 檢查文件大小
      */
     function checkFileSize(fileId){
         //獲取附件大小（單位：KB） 
         var fileSize  = document.getElementById(fileId).files[0].size / 1024; 
         if(fileSize > 2048){  
             alertify.alert("文件大小不能超過2MB");
             return false;
         } 
         return true;
     }
     
     /**
         * 檢查文件類型
         */
    function checkFileType(fileName){
        var fileAccepts = ["xlsx","zip","doc","docx","txt","rar","pdf","html","xls","ppt","jpg","png"];
        $("#fileDiv input").each(function(){
            //獲取上傳文件的後綴  
            var fileAccept = fileName.substring((fileName.lastIndexOf(".")+1),fileName.length);
            if($.inArray(fileAccept,fileAccepts)==-1){
                alertify.alert("文件格式不正確,只能上傳文件格式爲xlsx、zip、doc、docx、txt、rar、pdf、html、xls、ppt、jpg、png的文檔");
                return false;
            }
        })
            
        return true;
    }
     
     //顯示當前上傳的文件
     function showCurUpLoadFile(fileId,fileName){
         var itemHtml = '<div>'
                +'<strong title="Cancel" style="color: red;" onclick="taskPublish.add.cancelFile(this,\''+fileId+'\')">移除</strong><strong>' +fileName+ '</strong>'
                +'</div>';
         $("#fileNameShowDiv").append(itemHtml);
     }
    
     /**
      * 生成file的input臨時主鍵
      */
     function generateUUID() {
         var d = new Date().getTime();
         var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
           var r = (d + Math.random()*16)%16 | 0;
           d = Math.floor(d/16);
           return (c=='x' ? r : (r&0x3|0x8)).toString(16);
         });
         return uuid;
     };
         
     /**
      * 移除文件（隱藏的file和filename）
      */
     page.cancelFile = function(this_,fileId){
         $(this_).parent().remove();
         $("#"+fileId).remove();
     }

/**
     * 
     * 保存方法
     */
    $('#addForm #addBtn').click(function(){

           var jsonData = new FormData($("#addForm")[0]);

           $.ajax({
              url: "saveTaskPublishInfo.do",
              type: "post",
              contentType: false,
              data: jsonData,
              processData: false,
              success: function (data) {
                  if(data.success) {
                  } else {
                  }
              },
               error: function(XMLHttpRequest, textStatus, errorThrown) {
                   alertify.alert('服務請求失敗!!!');
               },
          });
    });

 

java代碼   

@RequestMapping(value="/saveTaskPublishInfo",method = RequestMethod.POST)
    public BaseResult saveTaskInfo( HttpServletRequest request) {

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
       String  name = request.getParameter("name");
        String code = request.getParameter("code");

       Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();

        if(fileMap == null || fileMap.size() == 0){
            return null;
        }
        Collection<MultipartFile> files = fileMap.values();
        for(MultipartFile file:files){
            String req= file.getOriginalFilename();
            System.out.println(req);
        }



      //這個調試代碼

       return null;

}