AJAX和JSP實現的基於WEB的檔案上傳的進度控制碼第1/2頁_AJAX相關

來源:互聯網
上載者:User
1.引言
2.實現代碼
2.1.伺服器端代碼
2.1.1. 檔案上傳狀態類(FileUploadStatus)
2.1.2. 檔案上傳狀態偵聽類(FileUploadListener)
2.1.3. 後台服務類(BackGroundService)
2.1.4. 檔案上傳狀態控制類(BeanControler)
2.2. 用戶端代碼
2.2.1. AjaxWrapper.js
2.2.2. fileUpload.html
2.2.3. result.jsp
2.2.4. fileUpload.css
2.3. 設定檔
3. 結語

 1. 引言

   基於瀏覽器的檔案上傳,特別是對於通過<input type="file">標籤來實現上傳的情況, 存在著嚴重的效能問題,因為使用者提交了檔案之後,在瀏覽器把檔案上傳到伺服器的過程中,介面看上去似乎是靜止的,如果是小檔案還好些,如果不幸需要上傳的是幾兆、幾十兆甚至上百兆的檔案,我相信那是一種非常痛苦的體驗,我們中間的很多人應該都有過此種不堪的經曆。(一笑)

  現在我就針對這個問題給出一個解決方案,我們將實現一個具有監控能力的WEB上傳的程式——它不僅把檔案上傳到伺服器,而且"即時地"監視檔案上傳的實際過程。

解決方案的基本思路是這樣的:

  •   在Form提交上傳檔案同時,使用AJAX周期性地從Servlet輪詢上傳狀態資訊
  •   然後,根據此資訊更新進度條和相關文字,及時反映檔案傳輸狀態
  •   如果使用者取消上傳操作,則進行相應的現場清理工作:刪除已經上傳的檔案,在Form提交頁面中顯示相關資訊
  •   如果上傳完畢,顯示已經上傳的檔案內容(或連結)

在介紹原始碼之前,我們先來看看程式運行介面:

 2. 實現代碼

   實現代碼想當然的有伺服器端代碼和用戶端代碼(呵呵),我們先從伺服器端開始。

 2.1. 伺服器端代碼

  2.1.1. 檔案上傳狀態類(FileUploadStatus)

   使用FileUploadStatus這個類記錄檔案上傳狀態,並將其作為伺服器端與web用戶端之間通訊的媒介,通過對這個類對象提供上傳狀態作為伺服器回應發送給web用戶端, web用戶端使用JavaScript獲得檔案上傳狀態。原始碼如下:

/** * 本常式示範了通過Web上傳檔案過程中的進度顯示。您可以對本常式進行任何修改和使用。 * 如果需要轉載本常式,請您註明作者。 * * 作者: 劉作晨 * EMail:liuzuochen@gmail.com */package liuzuochen.sample.upload;import java.util.*;public class FileUploadStatus {  //上傳使用者地址  private String uploadAddr;  //上傳總量  private long uploadTotalSize = 0;  //讀取上傳總量  private long readTotalSize = 0;  //當前上傳檔案號  private int currentUploadFileNum = 0;  //成功讀取上傳檔案數  private int successUploadFileCount = 0;  //狀態  private String status = "";  //處理起始時間  private long processStartTime = 0l;  //處理終止時間  private long processEndTime = 0l;  //處理執行時間  private long processRunningTime = 0l;  //上傳檔案URL列表  private List uploadFileUrlList = new ArrayList();  //取消上傳  private boolean cancel = false;  //上傳base目錄  private String baseDir = "";  public FileUploadStatus() {  }  public String getBaseDir() {    return baseDir;  }  public void setBaseDir(String baseDir) {    this.baseDir = baseDir;  }  public boolean getCancel() {    return cancel;  }  public void setCancel(boolean cancel) {    this.cancel = cancel;  }  public List getUploadFileUrlList() {    return uploadFileUrlList;  }  public void setUploadFileUrlList(List uploadFileUrlList) {    this.uploadFileUrlList = uploadFileUrlList;  }  public long getProcessRunningTime() {    return processRunningTime;  }  public void setProcessRunningTime(long processRunningTime) {    this.processRunningTime = processRunningTime;  }  public long getProcessEndTime() {    return processEndTime;  }  public void setProcessEndTime(long processEndTime) {    this.processEndTime = processEndTime;  }  public long getProcessStartTime() {    return processStartTime;  }  public void setProcessStartTime(long processStartTime) {    this.processStartTime = processStartTime;  }  public long getReadTotalSize() {    return readTotalSize;  }  public void setReadTotalSize(long readTotalSize) {    this.readTotalSize = readTotalSize;  }  public int getSuccessUploadFileCount() {    return successUploadFileCount;  }  public void setSuccessUploadFileCount(int successUploadFileCount) {    this.successUploadFileCount = successUploadFileCount;  }  public int getCurrentUploadFileNum() {    return currentUploadFileNum;  }  public void setCurrentUploadFileNum(int currentUploadFileNum) {    this.currentUploadFileNum = currentUploadFileNum;  }  public String getStatus() {    return status;  }  public void setStatus(String status) {    this.status = status;  }  public long getUploadTotalSize() {    return uploadTotalSize;  }  public String getUploadAddr() {    return uploadAddr;  }  public void setUploadTotalSize(long uploadTotalSize) {    this.uploadTotalSize = uploadTotalSize;  }  public void setUploadAddr(String uploadAddr) {    this.uploadAddr = uploadAddr;  }  public String toJSon() {    StringBuffer strJSon = new StringBuffer();    strJSon.append("{UploadTotalSize:").append(getUploadTotalSize()).append(        ",")        .append("ReadTotalSize:").append(getReadTotalSize()).append(",")        .append("CurrentUploadFileNum:").append(getCurrentUploadFileNum()).        append(",")        .append("SuccessUploadFileCount:").append(            getSuccessUploadFileCount()).append(",")        .append("Status:'").append(getStatus()).append("',")        .append("ProcessStartTime:").append(getProcessStartTime()).        append(",")        .append("ProcessEndTime:").append(getProcessEndTime()).append(            ",")        .append("ProcessRunningTime:").append(getProcessRunningTime()).        append(",")        .append("Cancel:").append(getCancel()).append("}");    return strJSon.toString();  }}

  2.1.2. 檔案上傳狀態偵聽類(FileUploadListener)

   使用Common-FileUpload 1.2版本(20070103)。此版本提供了能夠監視檔案上傳情況的ProcessListener介面,使開發人員通過FileUploadBase類對象的setProcessListener方法植入自己的Listener。 FileUploadListener類實現了ProcessListener,在整個檔案上傳過程中,它對上傳進度進行監控,並且根據上傳 情況即時的更新上傳狀態Bean。原始碼如下:

/** * 本常式示範了通過Web上傳檔案過程中的進度顯示。您可以對本常式進行任何修改和使用。 * 如果需要轉載本常式,請您註明作者。 * * 作者: 劉作晨 * EMail:liuzuochen@gmail.com */package liuzuochen.sample.upload;import org.apache.commons.fileupload.ProgressListener;import javax.servlet.http.HttpServletRequest;public class FileUploadListener implements ProgressListener{private HttpServletRequest request=null;public FileUploadListener(HttpServletRequest request){this.request=request;}/** * 更新狀態 */public void update(long pBytesRead, long pContentLength, int pItems){FileUploadStatus statusBean= BackGroundService.getStatusBean(request);statusBean.setUploadTotalSize(pContentLength);//讀取完成  if (pContentLength == -1) {    statusBean.setStatus("完成對" + pItems +"個檔案的讀取:讀取了 " + pBytesRead + " bytes.");    statusBean.setReadTotalSize(pBytesRead);    statusBean.setSuccessUploadFileCount(pItems);    statusBean.setProcessEndTime(System.currentTimeMillis());    statusBean.setProcessRunningTime(statusBean.getProcessEndTime());  //讀取中  } else {    statusBean.setStatus("當前正在處理第" + pItems +"個檔案:已經讀取了 " + pBytesRead + 
"/" + pContentLength+ " bytes."); statusBean.setReadTotalSize(pBytesRead); statusBean.setCurrentUploadFileNum(pItems); statusBean.setProcessRunningTime(System.currentTimeMillis()); } BackGroundService.saveStatusBean(request,statusBean);}}
當前1/2頁  12下一頁閱讀全文
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.