servlet+jquery实现文件上传进度条示例代码

package com.fei.servlet;  import java.io.IOException; import java.util.Date; import java.util.Map;  import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;  import com.fei.util.FileUploadUtil;  public class UploadFileServlet extends HttpServlet {       private static final long serialVersionUID = 1L;    public void doGet(HttpServletRequest request, HttpServletResponse response)       throws ServletException, IOException {     this.doPost(request, response);   }    public void doPost(HttpServletRequest request, HttpServletResponse response)       throws ServletException, IOException {     try {       long start = System.currentTimeMillis();       System.out.println("开始上传文件........." );       Map<String, String> params = FileUploadUtil.upload(request);       System.out.println("文件上传完成........." );       System.out.println("文件上次用时:"+(System.currentTimeMillis()-start)+"毫秒");     } catch (Exception e) {       e.printStackTrace();     }   } } 

package com.fei.util;  import java.io.File; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map;  import javax.servlet.http.HttpServletRequest;  import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.ProgressListener; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload;  public class FileUploadUtil {    /**    * 文件上传保存路径    */   private static final String SAVE_FILEPATH = "/fileupload/";   /**    * 文件上传临时保存路径    */   private static final String SAVE_FILE_TMPPATH = "/fileupload/tmp/";   /**    * 上传文件的最大值M    */   private static final int MAX_FILE_SIZE = 100*1024*1024;   /**    * 文件数据在内存中超过多少M后，就写入临时文件    */   private static final int THRESHOLD_SIZE = 2*1024*1024;      private static final String ENCODING = "UTF-8";      /**    * 处理文件上传的表单    * 下载文件，并返回文件名称及普通表单域中其它属性值    * 获取文件名    */   public static Map<String,String> upload(HttpServletRequest request)throws Exception{     Map<String,String> params = new HashMap<String, String>();          String savePath = request.getSession().getServletContext()         .getRealPath(SAVE_FILEPATH)+ File.separator;     String savePathTemp = request.getSession().getServletContext()         .getRealPath(SAVE_FILE_TMPPATH)+ File.separator;          File saveFileTempDir = new File(savePathTemp);          DiskFileItemFactory factory = new DiskFileItemFactory();     //当内存中文件数据达到THRESHOLD_SIZE后，就写入临时文件中，避免上传大文件时，消化太多内存     factory.setSizeThreshold(THRESHOLD_SIZE);     factory.setRepository(saveFileTempDir);          ServletFileUpload upload = new ServletFileUpload(factory);     upload.setHeaderEncoding(ENCODING);     upload.setSizeMax(MAX_FILE_SIZE);          FileUploadInfo fileUploadInfo = new FileUploadInfo();     upload.setProgressListener(new FileUploadListener(fileUploadInfo));     request.getSession().setAttribute("uploadInfo", fileUploadInfo);          List items = upload.parseRequest(request);     Iterator iter = items.iterator();     int fileNum = 1;     while(iter.hasNext()){       FileItem item = (FileItem) iter.next();       if (item.isFormField()) {//普通表单域         params.put(item.getFieldName(), item.getString());       } else {         String fileName = item.getName().replace("/", "//");         int i = fileName.lastIndexOf("//");         fileName = fileName.substring(i+1);         //避免重复         fileName = System.currentTimeMillis() + fileName;                  File uploadedFile = new File(savePath + fileName);         item.write(uploadedFile);                  params.put("fileName0"+fileNum, fileName);         fileNum ++;        }     }               return params;   }    }  class FileUploadListener implements ProgressListener{    FileUploadInfo fileUploadInfo = null;      public FileUploadListener(FileUploadInfo fileUploadInfo) {     this.fileUploadInfo = fileUploadInfo;   }      @Override   public void update(long uploadSize, long totalSize, int itemNum) {     this.fileUploadInfo.setTotalSize(totalSize);     this.fileUploadInfo.setUploadSize(uploadSize);        }    } 

package com.fei.util;  public class FileUploadInfo {    private final int K = 1024;      private final int M = K * 1024;      /**    * 总大小    */   private long totalSize;   /**    * 开始上传时间    */   private long startTime = System.currentTimeMillis();   /**    * 已上传多少    */   private long uploadSize;      /**    * 上传速度(K/S)    */   public double getUploadSpeed_K(){     long currentTime = System.currentTimeMillis();     long usedTime = currentTime - startTime;     if(usedTime == 0.0){       return 0.0;     }     return getUploadSize_K()/usedTime*1000d;   }   /**    * 获取已上传百分比    * @return    */   public double getUploadPercent(){     return (getUploadSize()*1.00/getTotalSize())*100d;   }   /**    * 剩余时间(s)    * @return    */   public double getRemainTime(){     double speedKB = getUploadSpeed_K();     if(speedKB<= 0.00){       return -1d;     }     return (getTotalSize_K() - getUploadSize_K())/speedKB;   }   /**    * 已上传时间    * @return    */   public double getUseTime(){     return (System.currentTimeMillis() - startTime)/1000d;   }      public long getTotalSize() {     return totalSize;   }      public double getTotalSize_K(){     return getTotalSize()*1.0/K;   }      public double getTotalSize_M(){     return getTotalSize()*1.0/M;   }      public long getUploadSize() {     return uploadSize;   }      public double getUploadSize_K(){     return getUploadSize()/K;   }      public double getUploadSize_M(){     return getUploadSize()/M;   }      public void setTotalSize(long totalSize) {     this.totalSize = totalSize;   }         public void setUploadSize(long uploadSize) {     this.uploadSize = uploadSize;   }      private String double2String(double d){     return String.format("%.2f", d);   }      public String toString(){     return "{"+         "'totalSize':'"+double2String(getTotalSize_M())+"M',"+         "'uploadSize':'"+double2String(getUploadSize_M())+"M',"+         "'uploadSpeed':'"+double2String(getUploadSpeed_K())+"KB/s',"+         "'uploadPrecent':'"+double2String(getUploadPercent())+"',"+         "'remainTime':'"+(getRemainTime()<0?"未知":double2String(getRemainTime()))+"s"+"',"+         "'useTime':'"+double2String(getUseTime())+"s' "+         "}";   } } 

package com.fei.servlet;  import java.io.IOException;  import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;  import com.fei.util.FileUploadInfo;  public class UploadFileProgressServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    public void doGet(HttpServletRequest request, HttpServletResponse response)       throws ServletException, IOException {     this.doPost(request, response);   }      public void doPost(HttpServletRequest request, HttpServletResponse response)       throws ServletException, IOException {     String responseContent = "";          Object obj = request.getSession().getAttribute("uploadInfo");     if(obj == null){       responseContent = "{'data':'NoData'}";     }else{       FileUploadInfo uploadInfo = (FileUploadInfo)obj;       responseContent = uploadInfo.toString();       if(uploadInfo.getUploadPercent()== 100.0){         request.getSession().setAttribute("uploadInfo", null);       }     }     System.out.println("文件上次情况："+responseContent);     response.getWriter().print(responseContent);   } } 

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/jquery-2.1.1.js" type="text/javascript"></script>  <script > var falseNum = 0; $(document).ready(function(){   $('#subbut').bind('click',       function(){         $('#fForm').submit();         var eventFun = function(){           $.ajax({             type: 'GET',             url: '/uploadtest/UploadFileProgressServlet.do',             data: {},             dataType: 'text',             success : function(resData){               //如果10次都失败，那就不要继续访问了               if(falseNum > 10){                window.clearInterval(intId);                return;               }               var obj = eval("("+resData+")");               if(obj.data == 'NoData'){                 falseNum ++ ;                 return;               }               $("#graphbox").css('display','block');               $(".progressbar").css('width',obj.uploadPrecent+'%');               $("#uploadPer").html(obj.uploadPrecent+'%');               $("#progressInfo").html('总大小：'+obj.totalSize                   +'，速度：'+obj.uploadSpeed                   +'%，剩余时间：'+obj.remainTime+'，已用时间：'+obj.useTime);               if(obj.uploadPrecent == 100){                 window.clearInterval(intId);                 $("#progressInfo").html("上传成功！");               }           }});};         var intId = window.setInterval(eventFun,500);   }); }); </script> <style> #graphbox{ border:1px solid #e7e7e7; padding:5px; width:350px; background-color:#f8f8f8; margin:5px 0; display:none; } .graph{ position:relative; background-color:#F0EFEF; border:1px solid #cccccc; padding:2px; font-size:10px; font-weight:500; } .graph .progressbar{ position:relative; text-align:right; color:#ffffff; height:10px; line-height:10px; font-family:Arial; display:block; } .graph .progressbar{background-color:#66CC33;}  </style> </head> <body>     <form id='fForm' class="form-actions form-horizontal" action="/uploadtest/UploadFileServlet.do"         encType="multipart/form-data" target="uploadf" method="post">          <div class="control-group">           <label class="control-label">上传文件:</label>           <div class="controls">             <input type="file" name="file" style="width:350px"></br>             <input type="file" name="file2" style="width:350px"></br>             <button type="button" id="subbut" class="btn">上传</button>             </div>           <div id="graphbox">             <div class="graph">             <span class="progressbar" style="width:0%;"><span id="uploadPer"></span></span>             </div>           </div>           <div id='progressInfo'>           </div>         </div>     </form>     <iframe name="uploadf" style="display:none"></iframe> </body> </html>