使用html+ajax+formdata+SpringMVC實現單個檔案，和多個檔案上傳功能__html

html代碼

<input type="file" multiple="true" id="file" name="file"/><button class="u-button u-button-primary" onclick="uploadFileMethod1()" id="doUpload">確認附件</button>

js代碼

單個檔案上傳

 function uploadFileMethodSingleFile()  {       var FileController = $ctx+"/fankuiController/saveFiles";                    // 接收上傳檔案的後台地址      // FormData 對象      var fileName = document.getElementById("file").value;     // alert(getPath(fileObj));      var form = new FormData();      var fileObj = document.getElementById("file").files[0]; // 擷取檔案對象       form.append("file ",fileObj );   // 檔案對象         var xhr = new XMLHttpRequest();      xhr.open("post", FileController, true);      xhr.send(form);      xhr.onload = function () {          alert("上傳完成!");      };  }

單個檔案上傳時，controller用MultipartFile 類型的參數接受檔案

@RequestMapping(method = RequestMethod.POST,value = "saveFiles")public @ResponseBody Map<String,Object> saveFiles(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) {Map<String,Object> reg=new HashMap<String,Object>();  //將記憶體中的資料寫入磁碟System.out.println("開始進行附件上傳");try {//String filePath = request.getSession().getServletContext().getRealPath("/");String filePath ="c:\\";MultipartFile file = fileArray[i];String originalFileName = file.getOriginalFilename();String newFileName = UUID.randomUUID()+originalFileName;String finalPath = filePath+newFileName;System.out.println(originalFileName);System.out.println(newFileName);System.out.println(finalPath);System.out.println("參數"+request.getParameter("json_filesNameArray"));System.out.println("file"+file.getContentType());File fileAttach = new File(finalPath);file.transferTo(fileAttach);} catch (Exception e1) {e1.printStackTrace();}//上傳成功後，將附件加入資料庫附件表格的blob欄位中            reg.put("result","success");  return reg;}

如果是多個檔案上傳 fomdata 中要使用formdata.append() 對多個檔案進行遍曆 然後進行上傳

function uploadFileMethod1()  {       var FileController = $ctx+"/fankuiController/saveFiles";                    // 接收上傳檔案的後台地址      // FormData 對象      var fileName = document.getElementById("file").value;     // alert(getPath(fileObj));      var form = new FormData();      form.append("json_filesNameArray", fileName);                        // 可以增加表單資料//      var fileArray = new Array();//      for(var i=0;i<fileArray.length;i++)//    {//      var fileObj = document.getElementById("file").files[i]; // 擷取檔案對象//      fileArray.push(fileObj);//    }      var files = document.getElementById("file").files;      for(var i=0; i< files.length; i++){      alert(files[i].name);      form.append("fileArray",files[i]);   // 檔案對象        }       // XMLHttpRequest 對象      //var fileObj = document.getElementById("file").files[0];      //form.append("fileArray", fileObj);      var xhr = new XMLHttpRequest();      xhr.open("post", FileController, true);      xhr.send(form);      xhr.onload = function () {          alert("上傳完成!");      };  }

多檔案上傳時，controller端，進行接收時 使用 MultipartFile[] 型別參數 接受 數群組類型的多個檔案,然後遍曆數組進行操作

@RequestMapping(method = RequestMethod.POST,value = "saveFiles")public @ResponseBody Map<String,Object> saveFiles(@RequestParam(value = "fileArray") MultipartFile[] fileArray, HttpServletRequest request) {Map<String,Object> reg=new HashMap<String,Object>();  //將記憶體中的資料寫入磁碟System.out.println("開始進行附件上傳");System.out.println(fileArray.length);try {for(int i=0;i<fileArray.length;i++){//String filePath = request.getSession().getServletContext().getRealPath("/");String filePath ="c:\\";MultipartFile file = fileArray[i];String originalFileName = file.getOriginalFilename();String newFileName = UUID.randomUUID()+originalFileName;String finalPath = filePath+newFileName;System.out.println(originalFileName);System.out.println(newFileName);System.out.println(finalPath);System.out.println("參數"+request.getParameter("json_filesNameArray"));System.out.println("file"+file.getContentType());File fileAttach = new File(finalPath);file.transferTo(fileAttach);}} catch (Exception e1) {e1.printStackTrace();}