AJAX和JSP實(shí)現(xiàn)的基于WEB的文件上傳的進(jìn)度控制代碼第1/2頁(yè)

2024-09-01 08:29:45

字體：大中小

供稿：網(wǎng)友

1.引言 2.實(shí)現(xiàn)代碼

2.1.服務(wù)器端代碼

2.1.1. 文件上傳狀態(tài)類（FileUploadStatus） 2.1.2. 文件上傳狀態(tài)偵聽類（FileUploadListener） 2.1.3. 后臺(tái)服務(wù)類（BackGroundService） 2.1.4. 文件上傳狀態(tài)控制類（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. 結(jié)語(yǔ)

1. 引言

　　基于瀏覽器的文件上傳，特別是對(duì)于通過(guò)<input type="file">標(biāo)簽來(lái)實(shí)現(xiàn)上傳的情況，存在著嚴(yán)重的性能問(wèn)題，因?yàn)橛脩籼峤涣宋募螅跒g覽器把文件上傳到服務(wù)器的過(guò)程中，界面看上去似乎是靜止的，如果是小文件還好些，如果不幸需要上傳的是幾兆、幾十兆甚至上百兆的文件，我相信那是一種非常痛苦的體驗(yàn)，我們中間的很多人應(yīng)該都有過(guò)此種不堪的經(jīng)歷。（一笑）

　　現(xiàn)在我就針對(duì)這個(gè)問(wèn)題給出一個(gè)解決方案，我們將實(shí)現(xiàn)一個(gè)具有監(jiān)控能力的WEB上傳的程序——它不僅把文件上傳到服務(wù)器，而且"實(shí)時(shí)地"監(jiān)視文件上傳的實(shí)際過(guò)程。

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

　　在Form提交上傳文件同時(shí)，使用AJAX周期性地從Servlet輪詢上傳狀態(tài)信息　　然后，根據(jù)此信息更新進(jìn)度條和相關(guān)文字，及時(shí)反映文件傳輸狀態(tài) 　　如果用戶取消上傳操作，則進(jìn)行相應(yīng)的現(xiàn)場(chǎng)清理工作：刪除已經(jīng)上傳的文件，在Form提交頁(yè)面中顯示相關(guān)信息　　如果上傳完畢，顯示已經(jīng)上傳的文件內(nèi)容(或鏈接)

在介紹源代碼之前，我們先來(lái)看看程序運(yùn)行界面：

2. 實(shí)現(xiàn)代碼

　　實(shí)現(xiàn)代碼想當(dāng)然的有服務(wù)器端代碼和客戶端代碼（呵呵），我們先從服務(wù)器端開始。

2.1. 服務(wù)器端代碼

2.1.1. 文件上傳狀態(tài)類（FileUploadStatus）

　　使用FileUploadStatus這個(gè)類記錄文件上傳狀態(tài)，并將其作為服務(wù)器端與web客戶端之間通信的媒介，通過(guò)對(duì)這個(gè)類對(duì)象提供上傳狀態(tài)作為服務(wù)器回應(yīng)發(fā)送給web客戶端， web客戶端使用JavaScript獲得文件上傳狀態(tài)。源代碼如下：

/** * 本例程演示了通過(guò)Web上傳文件過(guò)程中的進(jìn)度顯示。您可以對(duì)本例程進(jìn)行任何修改和使用。 * 如果需要轉(zhuǎn)載本例程，請(qǐng)您注明作者。 * * 作者： 劉作晨 * 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;  //當(dāng)前上傳文件號(hào)  private int currentUploadFileNum = 0;  //成功讀取上傳文件數(shù)  private int successUploadFileCount = 0;  //狀態(tài)  private String status = "";  //處理起始時(shí)間  private long processStartTime = 0l;  //處理終止時(shí)間  private long processEndTime = 0l;  //處理執(zhí)行時(shí)間  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();  }}