AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

2024-09-01 08:29:45

字体：大中小

来源：转载

供稿：网友

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