ajax轮询jsp,AJAX+JSP实现基于WEB的文件上传的进度控制.doc

AJAX+JSP实现基于WEB的文件上传的进度控制.doc

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.?引言

基于浏览器的文件上传，特别是对于通过标签来实现上传的情况， 存在着严重的性能问题，因为用户提交了文件之后，在浏览器把文件上传到服务器的过程中，界面看上去似乎是静止的，如果是小文件还好些，如果不幸需要上传的是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种不堪的经历。(一笑)

现在我就针对这个问题给出一个解决方案，我们将实现一个具有监控能力的WEB上传的程序——它不仅把文件上传到服务器，而且"实时地"监视文件上传的实际过程。

解决方案的基本思路是这样的：

在Form提交上传文件同时，使用AJAX周期性地从Servlet轮询上传状态信息

然后，根据此信息更新进度条和相关文字，及时反映文件传输状态

如果用户取消上传操作，则进行相应的现场清理工作：删除已经上传的文件，在Form提交页面中显示相关信息

如果上传完毕，显示已经上传的文件内容(或链接)

在介绍源代码之前，我们先来看看程序运行界面：

?2.?实现代码

实现代码想当然的有服务器端代码和客户端代码(呵呵)，我们先从服务器端开始。

?2.1.?服务器端代码

??2.1.1.?文件上传状态类(FileUploadStatus)

使用FileUploadStatus这个类记录文件上传状态，并将其作为服务器端与web客户端之间通信的媒介，通过对这个类对象提供上传状态作为服务器回应发送给web客户端， web客户端使用JavaScript获得文件上传状态。源代码如下：

/**

* 本例程演示了通过Web上传文件过程中的进度显示。您可以对本例程进行任何修改和使用。

* 如果需要转载本例程，请您注明作者。

*

* 作者： 刘作晨

* EMail:liuzuochen@

*/

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 getCance