spring MVC + bootstrap实现文件上传示例（带进度条）

package com.gpl.web.listener;  import javax.servlet.http.HttpSession;  import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereotype.Component;  import com.gpl.web.utils.Progress;   @Component public class FileUploadProgressListener implements ProgressListener{    private HttpSession session;      public void setSession(HttpSession session){     this.session = session;     Progress status = new Progress();     session.setAttribute("status", status);   }   @Override   public void update(long bytesRead, long contentLength, int items) {     Progress status = (Progress) session.getAttribute("status");     status.setBytesRead(bytesRead);     status.setContentLength(contentLength);     status.setItems(items);   }  } 

package com.gpl.web.listener;  import java.util.List; import javax.servlet.http.HttpServletRequest;  import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUpload; import org.apache.commons.fileupload.FileUploadBase; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.multipart.MaxUploadSizeExceededException; import org.springframework.web.multipart.MultipartException; import org.springframework.web.multipart.commons.CommonsMultipartResolver;  public class CustomMultipartResolver extends CommonsMultipartResolver{      @Autowired   private FileUploadProgressListener progressListener;      public void setFileUploadProgressListener(FileUploadProgressListener progressListener){     this.progressListener = progressListener;   }      public MultipartParsingResult parsingResult(HttpServletRequest request){     String encoding = determineEncoding(request);     FileUpload fileUpload = prepareFileUpload(encoding);     progressListener.setSession(request.getSession());     fileUpload.setProgressListener(progressListener);     try{       List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);       return parseFileItems(fileItems, encoding);     }catch(FileUploadBase.SizeLimitExceededException ex){       throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);     }catch (FileUploadException e) {       throw new MultipartException("异常",e);     }   }  } 

package com.gpl.web.utils; public class Progress {    private long bytesRead;   private long contentLength;   private long items;   public long getBytesRead() {     return bytesRead;   }   public void setBytesRead(long bytesRead) {     this.bytesRead = bytesRead;   }   public long getContentLength() {     return contentLength;   }   public void setContentLength(long contentLength) {     this.contentLength = contentLength;   }   public long getItems() {     return items;   }   public void setItems(long items) {     this.items = items;   }   @Override   public String toString() {     return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";   }       } 

<!-- 文件上传 -->   <bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver">     <property name="defaultEncoding" value="utf-8"></property>     <property name="maxUploadSize" value="838860800"></property>   </bean> 

/**    * 文件上传    * @param request    * @param response    * @param file    * @throws IOException    */   @RequestMapping(value = "/upload", method = RequestMethod.POST)   public void upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file)       {     try{       PrintWriter out;       boolean flag = false;       if(file.getSize() > 0){         String path = "/asserts/upload/files/excel/";         String uploadPath = request.getSession().getServletContext().getRealPath(path);         System.out.println(uploadPath);         FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath,file.getOriginalFilename()));         flag = true;       }       out = response.getWriter();       if(flag == true){         out.print("1");       }else{         out.print("2");       }     }catch(Exception e){       e.printStackTrace();     }        } 

<div id="uploadFileDlg" class="easyui-dialog" style="width:800px;text-align:center;"       closed="true">       <form id="uploadFileForm" method="post" style="width:100%;text-align:center;padding:20px 0;">         <input id="file" type="file" style="width:500px;display:inline-block;">         <button id="uploadBtn" class="easyui-linkButton" style="width:auto;display:inline-block;">上传</button>        </form>       <div class="progress progress-bar-striped active" style="display:none;">         <div id="progressBar" class="progress-bar progress-bar-info" role="progressbar"         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"         style="width:0%;">         </div>       </div>       <table id="uploadBatchDg"></table>     </div> 

$("#uploadBtn").attr("disabled",false);     $("#uploadBtn").click(function(){       var fileValue = $("#file").val();       if(fileValue == null || fileValue == ""){         layer.msg("请先选择文件");         return;       }       var obj = $("#file");       var photoExt=obj.val().substr(obj.val().lastIndexOf(".")).toLowerCase();//获得文件后缀名       if(photoExt!=".xls" && photoExt!=".xlsx"){         layer.msg("请选择xls或是xlsx格式的文件，不支持其他格式文件");         return false;       }       var fileSize = 0;       var isIE = /msie/i.test(navigator.userAgent) && !window.opera;          if (isIE && !obj.files) {            var filePath = obj.val();            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");          var file = fileSystem.GetFile (filePath);             fileSize = file.Size;          }else {          fileSize = obj.get(0).files[0].size;         }        fileSize=Math.round(fileSize/1024*100)/100; //单位为KB       if(fileSize > 5000){         layer.msg("文件不能大于5M");         return false;       }       $("#progressBar").width("0%");       $(this).attr("disabled",true);       $("#progressBar").parent().show();       $("#progressBar").parent().addClass("active");       uploadFile(); 

function uploadFile() {       var fileObj = $("#file").get(0).files[0]; // js 获取文件对象       console.info("上传的文件："+fileObj);       var FileController = "${basePath}/batch/upload"; // 接收上传文件的后台地址        // FormData 对象       var form = new FormData();       // form.append("author", "hooyes"); // 可以增加表单数据       form.append("file", fileObj); // 文件对象       // XMLHttpRequest 对象       var xhr = new XMLHttpRequest();       xhr.open("post", FileController, true);       xhr.onload = function() {         layer.msg("上传完成");         $("#uploadBtn").attr('disabled', false);         $("#uploadBtn").val("上传");         $("#progressBar").parent().removeClass("active");         $("#progressBar").parent().hide();       };       xhr.upload.addEventListener("progress", progressFunction, false);       xhr.send(form);     }         function progressFunction(evt) {       var progressBar = $("#progressBar");       if (evt.lengthComputable) {         var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";         progressBar.width(completePercent);         $("#uploadBtn").val("正在上传 " + completePercent);       }     };