后端springmvc，前端html5的FormData实现文件断点上传

后端代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

package  com.test.controller;   import  java.io.BufferedOutputStream; import  java.io.File; import  java.io.FileOutputStream; import  java.util.UUID;   import  org.apache.commons.io.FileUtils; import  org.apache.commons.io.FilenameUtils; import  org.springframework.stereotype.Controller; import  org.springframework.web.bind.annotation.RequestMapping; import  org.springframework.web.bind.annotation.RequestMethod; import  org.springframework.web.bind.annotation.RequestParam; import  org.springframework.web.bind.annotation.ResponseBody; import  org.springframework.web.multipart.MultipartFile;   @Controller public  class  UploadController {        @ResponseBody  // 返回rest json      @RequestMapping (value = { "/rest/saveUploadFileAsChunk" }, method = RequestMethod.POST, produces =  "application/json" )      public  File saveUploadFileAsChunk( @RequestParam (required =  false ) MultipartFile file,              @RequestParam (required =  true ) Integer chunk,   // 分割块数              @RequestParam (required =  true ) Integer chunks,   // 总分割数              @RequestParam (required =  true ) String tempFileName  //临时文件名  必须带后缀名              )  throws  Exception{          if ( null  != file){              // 保存临时文件              String chunkName = tempFileName;              if  (chunk !=  null ) {                  chunkName = chunk +  "_"  + tempFileName;              }              File savedFile =  new  File( "普通存放文件的路径" , chunkName);              if  (!savedFile.getParentFile().exists())                  savedFile.getParentFile().mkdirs();              file.transferTo(savedFile);   //将MultipartFile转存到file对象          }                    //如果到最后一个分割块，则做合并处理          if  (chunk !=  null  && chunk +  1  == chunks) {              String newFileName = UUID.randomUUID().toString().replace( "-" ,  "" ).concat( "." ).concat(FilenameUtils.getExtension(tempFileName));              BufferedOutputStream outputStream =  new  BufferedOutputStream( new  FileOutputStream( new  File( "普通存放文件的路径" , newFileName)));              // 遍历文件合并  chunks，循环将文件写入新的文件中，并且删除之前的临时文件               for  ( int  i =  0 ; i < chunks; i++) {                  File tempFile =  new  File( "普通存放文件的路径" , i +  "_"  + tempFileName);                  byte [] bytes = FileUtils.readFileToByteArray(tempFile);    //将file对象解析城byte数组                  outputStream.write(bytes);                  outputStream.flush();                  tempFile.delete();              }              outputStream.flush();              outputStream.close();              File reallyFile =  new  File( "普通存放文件的路径" , newFileName);   //reallyFile即最后合并的文件              return  reallyFile;          }          return  null ;      } }

　　前端代码： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

var  setsize = 10 * 1024;    //1024字节 = 1KB * 10  即每次10k   /**   *参数filepath就是本地文件路径，主要就是用于放在localStorage中确定唯一性 file ： js的Blob对象 */ function  uplaod(filepath,file){      var  filesize = file.size;      var  filecount = filesize/setsize;    //计算出可以分成几块        var  i = localStorage.getItem(filepath);      i = (i!= null  && i!= "" )?parseInt(i):0;        if (i < filecount){          //新建一个FormData对象          var  formData =  new  FormData();  //++++++++++          var  blobfile;          if ((filesize - i * setsize) > setsize){              blobfile = file.slice(i*setsize,(i+1)*setsize);          } else {              //代表是最后一此了              blobfile = file.slice(i*setsize,filesize);          }            formData.append( 'chunk' , i);  //++++++++++当前文件块          formData.append( 'chunks' , Math.ceil(filecount));  //++++++++++  总块数          formData.append( "tempFileName" ,fileName);    //临时文件名 带uuid的          formData.append( 'file' , blobfile);            if (i < filecount){          $.ajax({              url: PATROL_CONSTANTS.SRV_URL+ "/rest/saveUploadFileAsChunk" ,              type:  'POST' ,              data: formData,              processData:  false ,              contentType:  false ,              success:  function  (responseStr) {                  localStorage.setItem(filepath,i+1);                  var  rs = filecount <= 0 ?  "0%"  : (Math.round((i+1) / Math.ceil(filecount) * 10000) / 100.00 +  "%" );                  console.log( "进度百分比：" +rs);                                    uploadFile(filepath,file);   //递归调用              },              error:  function  (responseStr) {                  console.log( "上传失败,重复尝试!" );                  console.log(responseStr);                  uploadFile(filepath,file);              }          });      } else {          //上传完成后,则将对应的localStorage移除掉          localStorage.removeItem(filepath);      } }