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

1、AJAX JSP实现基于WEB的文件上传的进度控制1.引言 2.实现代码 2.1.服务器端代码 文件上传状态类（FileUploadStatus） 文件上传状态侦听类（FileUploadListener） 后台服务类（BackGroundService） 文件上传状态控制类（BeanControler） 2.2. 客户端代码 AjaxWrapper.js fileUpload.html result.jsp fileUpload.css 2.3. 配置文件 3. 结语 1.引言 基于浏览器的文件上传，特别是对于通过标签来实现上传的情况， 存在着严重的性能问题，因为用户提交了文件之后，在浏览器

2、把文件上传到服务器的过程中，界面看上去似乎是静止的，如果是小文件还好些，如果不幸需要上传的是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种不堪的经历。（一笑）现在我就针对这个问题给出一个解决方案，我们将实现一个具有监控能力的WEB上传的程序它不仅把文件上传到服务器，而且实时地监视文件上传的实际过程。解决方案的基本思路是这样的： 在Form提交上传文件同时，使用AJAX周期性地从Servlet轮询上传状态信息 然后，根据此信息更新进度条和相关文字，及时反映文件传输状态 如果用户取消上传操作，则进行相应的现场清理工作：删除已经上传的文件，在Form提交页

3、面中显示相关信息 如果上传完毕，显示已经上传的文件内容(或链接) 在介绍源代码之前，我们先来看看程序运行界面：2.实现代码 实现代码想当然的有服务器端代码和客户端代码（呵呵），我们先从服务器端开始。2.1.服务器端代码文件上传状态类（FileUploadStatus） 使用FileUploadStatus这个类记录文件上传状态，并将其作为服务器端与web客户端之间通信的媒介，通过对这个类对象提供上传状态作为服务器回应发送给web客户端， web客户端使用JavaScript获得文件上传状态。源代码如下：/* * 本例程演示了通过Web上传文件过程中的进度显示。您可以对本例程进行任何修改和使用。

4、 * 如果需要转载本例程，请您注明作者。 * * 作者： 刘作晨 * EMail: */package ;import java.util.*;public class FileUploadStatus /上传用户地址 private String uploadAddr; /上传总量 private long uploadTotalSize = 0; /读取上传总量 private long readTotalSize = 0; /当前上传文件号 private int currentUploadFileNum = 0; /成功读取上传文件数 private int successUpload

5、FileCount = 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

6、 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 uploadFileU

7、rlList; public void setUploadFileUrlList(List uploadFileUrlList) this.uploadFileUrlList = uploadFileUrlList; public long getProcessRunningTime() return processRunningTime; public void setProcessRunningTime(long processRunningTime) this.processRunningTime = processRunningTime; public long getProcessE

8、ndTime() 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 getReadTota

9、lSize() return readTotalSize; public void setReadTotalSize(long readTotalSize) this.readTotalSize = readTotalSize; public int getSuccessUploadFileCount() return successUploadFileCount; public void setSuccessUploadFileCount(int successUploadFileCount) this.successUploadFileCount = successUploadFileCo

10、unt; 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 getUp

11、loadTotalSize() 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

12、 = new StringBuffer(); strJSon.append(UploadTotalSize:).append(getUploadTotalSize().append( ,) .append(ReadTotalSize:).append(getReadTotalSize().append(,) .append(CurrentUploadFileNum:).append(getCurrentUploadFileNum(). append(,) .append(SuccessUploadFileCount:).append( getSuccessUploadFileCount().a

13、ppend(,) .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()

14、; return strJSon.toString(); 文件上传状态侦听类（FileUploadListener） 使用Common-FileUpload 1.2版本()。此版本提供了能够监视文件上传情况的ProcessListener接口，使开发者通过FileUploadBase类对象的setProcessListener方法植入自己的Listener。 FileUploadListener类实现了ProcessListener，在整个文件上传过程中，它对上传进度进行监控，并且根据上传 情况实时的更新上传状态Bean。源代码如下：/* * 本例程演示了通过Web上传文件过程中的进度显示。您

15、可以对本例程进行任何修改和使用。 * 如果需要转载本例程，请您注明作者。 * * 作者： 刘作晨 * EMail: */package ;import ;import ;public class FileUploadListener implements ProgressListener private HttpServletRequest request=null; public FileUploadListener(HttpServletRequest request) this.request=request; /* * 更新状态 */ public void update(long p

16、BytesRead, long pContentLength, int pItems) FileUploadStatus statusBean= BackGroundService.getStatusBean(request); statusBean.setUploadTotalSize(pContentLength); /读取完成 if (pContentLength = -1) statusBean.setStatus(完成对 + pItems +个文件的读取:读取了 + pBytesRead + bytes.); statusBean.setReadTotalSize(pBytesRea

17、d); statusBean.setSuccessUploadFileCount(pItems); statusBean.setProcessEndTime(System.currentTimeMillis(); statusBean.setProcessRunningTime(statusBean.getProcessEndTime(); /读取中 else statusBean.setStatus(当前正在处理第 + pItems +个文件:已经读取了 + pBytesRead + / + pContentLength+ bytes.); statusBean.setReadTotalSi

18、ze(pBytesRead); statusBean.setCurrentUploadFileNum(pItems); statusBean.setProcessRunningTime(System.currentTimeMillis(); BackGroundService.saveStatusBean(request,statusBean); 后台服务类（BackGroundService） BackGroundService这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。 尽管可以把这些功能相互分离开来，但为了简单明了，还是将它们放到Serv

19、let中，只是由不同的方法进行分割。 源代码如下：/* * 本例程演示了通过Web上传文件过程中的进度显示。您可以对本例程进行任何修改和使用。 * 如果需要转载本例程，请您注明作者。 * * 作者： 刘作晨 * EMail: */package ;/* * Title: 后台服务 * * Description: 为客户端提供上传及文件传输状态查询服务 * */import ;import ;import ;import ;import ;import ;import ;import ;import ;import ;public class BackGroundService extends

20、 implements public static final String UPLOAD_DIR = /upload; public static final String DEFAULT_UPLOAD_FAILURE_URL = ./result.jsp; public BackGroundService() super(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException doPost(request, r

21、esponse); /* * 从文件路径中取出文件名 */ private String takeOutFileName(String filePath) int pos = filePath.lastIndexOf(File.separator); if (pos 0) return filePath.substring(pos + 1); else return filePath; /* * 从request中取出FileUploadStatus Bean */ public static FileUploadStatus getStatusBean( HttpServletRequest

22、 request) BeanControler beanCtrl = BeanControler.getInstance(); return beanCtrl.getUploadStatus(request.getRemoteAddr(); /* * 把FileUploadStatus Bean保存到类控制器BeanControler */ public static void saveStatusBean( HttpServletRequest request, FileUploadStatus statusBean) statusBean.setUploadAddr(request.get

23、RemoteAddr(); BeanControler beanCtrl = BeanControler.getInstance(); beanCtrl.setUploadStatus(statusBean); /* * 删除已经上传的文件 */ private void deleteUploadedFile(HttpServletRequest request) FileUploadStatus satusBean = getStatusBean(request); for (int i = 0; i satusBean.getUploadFileUrlList().size(); i+)

24、File uploadedFile = new File(request.getRealPath(UPLOAD_DIR) + File.separator + satusBean.getUploadFileUrlList(). get(i); uploadedFile.delete(); satusBean.getUploadFileUrlList().clear(); satusBean.setStatus(删除已上传的文件); saveStatusBean(request, satusBean); /* * 上传过程中出错处理 */ private void uploadException

25、Handle( HttpServletRequest request, String errMsg) throws ServletException, IOException /首先删除已经上传的文件 deleteUploadedFile(request); FileUploadStatus satusBean = getStatusBean(request); satusBean.setStatus(errMsg); saveStatusBean(request, satusBean); /* * 初始化文件上传状态Bean */ private FileUploadStatus initS

26、tatusBean(HttpServletRequest request) FileUploadStatus satusBean = new FileUploadStatus(); satusBean.setStatus(正在准备处理); satusBean.setUploadTotalSize(request.getContentLength(); satusBean.setProcessStartTime(System.currentTimeMillis(); satusBean.setBaseDir(request.getContextPath() + UPLOAD_DIR); retu

27、rn satusBean; /* * 处理文件上传 */ private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException DiskFileItemFactory factory = new DiskFileItemFactory(); /设置内存缓冲区，超过后写入临时文件 factory.setSizeThreshold(); /设置临时文件存储位置 factory.setRepository(new Fil

28、e(request.getRealPath(/upload/temp); ServletFileUpload upload = new ServletFileUpload(factory); /设置单个文件的最大上传值 upload.setFileSizeMax(0); /设置整个request的最大值 upload.setSizeMax(0); upload.setProgressListener(new FileUploadListener(request); /保存初始化后的FileUploadStatus Bean saveStatusBean(request, initStatusBean(request); String forwardURL = ; try List items = upload.parseRequest(request); /获得返回url for (int i = 0; i items.size(); i+) FileItem item = (FileItem) items.get(i); if (item.isFormField() forwardURL = item.getString(); break; /处理文件上传 for (int i = 0; i 0) String fileName = takeOutFileN