servlet+jquery實現(xiàn)文件上傳進度條示例代碼

更新時間：2017年01月25日 10:55:04 作者：夢_殤

現(xiàn)在文件的上傳，特別是大文件上傳，都需要進度條。這篇文章主要介紹了servlet+jquery實現(xiàn)文件上傳進度條示例代碼，有興趣的可以了解一下。

現(xiàn)在文件的上傳，特別是大文件上傳，都需要進度條，讓客戶知道上傳進度。

本文簡單記錄下如何弄進度條，以及一些上傳信息，比如文件的大小，上傳速度，預計剩余時間等一些相關信息。代碼是匆忙下簡單寫的，一些驗證沒做，或代碼存在一些隱患，不嚴謹?shù)牡胤?。本文代碼只供參考。

進度條的樣式多種多樣，有些網站弄得非常絢爛漂亮。本文UI端不太懂，只會一些簡單的基本的css而已，所以進度條弄得不好看。本文側重的給讀者提供一個參考，一個實現(xiàn)思路而已。

注：由于jQuery版本用的是2.1.1,所以如果跑本例子源碼，請用IE9以上或火狐、谷歌瀏覽器測試。

接收文件上傳的servlet

UploadFileServlet.Java

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(); 
    } 
  } 
}

將上傳文件進行下載到服務器的處理

FileUploadUtil.java

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; 
  /** 
   * 文件數(shù)據在內存中超過多少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(); 
    //當內存中文件數(shù)據達到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); 
     
  } 
   
}

上傳文件的一些信息

FileUploadInfo.java

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' "+ 
        "}"; 
  } 
}

讀取文件上傳進度的servlet

UploadFileProgressServlet.java

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); 
  } 
}

前臺頁面upload2.html

<!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次都失敗，那就不要繼續(xù)訪問了 
              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>

將項目部署到tomcat(或其他web容器），訪問http://172.16.126.128:8080/uploadtest/upload2.html

效果：