在上一篇博文中介绍了通过POST的方式上传文件:点击打开链接 ,这一篇文章将介绍如何实现带进度条的上传效果。
工作原理:上传文件的同时,Servlet将上传进度的信息例如文件总长度、已上传文件的多少、传输速率写入Session中。客户端浏览器利用Ajax技术再新开辟一个独立的线程冲Session中获取上传进度信息,并实时显示。Ajax可以不刷新页面获取服务器数据。Session可以看做服务器内存,可以用于存放少量客户信息。上传文件仍然使用Apache开源包:commons-file-1.2.jar和commons-io-2.5.jar包。
上传进度条:通过两个<div>实现:
<style type="text/css">
body,td,div{font-size:12px;font-familly:宋体;}
#progressBar{width:400px;height:12px;background:#FFFFFF;border:1px solid #000000;padding:1px;}
#progressBarItem{width:30%;height:100%;background:#FF0000;}
</style>
<div id="progressBar"><div id="progressBarItem"></div></div>
效果图如下:
监听器:我们需要在文件上传的时候,不断的更新上传状态。commons-fileupload中有ProgressListener接口,只要实现这个接口中的方法:public void update(long bytesRead, long contentLength, int items)。byteRead表示已经上传的字节数,contentLength代表上传的文件的总长度,items表示正在上传第几个文件。添加了监听器之后,就可以计算出文件上传的进度,用进度条实时的显示出来。因此需要把这些数据保存起来,代码中通过一个自定义的Java bean:UploadStatus类。代码如下:
package com.hello.firstweb.listener;
import org.apache.commons.fileupload.ProgressListener;
import com.hello.firstweb.bean.UploadStatus;
public class UploadListener implements ProgressListener{
private UploadStatus status;
@Override
public void update(long bytesRead, long contentLength, int items) {
// TODO Auto-generated method stub
status.setBytesRead(bytesRead);//已读取数据长度
status.setContentLength(contentLength);//文件总长度
status.setItems(items);//正在保存第几个文件
}
public UploadListener(UploadStatus status){
this.status = status;
}
}
package com.hello.firstweb.bean;
public class UploadStatus {
private long bytesRead; //已上传的字节数
private long contentLength; //所有文件的总长度
private long startTime = System.currentTimeMillis();
// 开始上传时间,用于计算上传速率
private int items; //正在上传第几个文件
public long getBytesRead() {
return bytesRead;
}
public void setBytesRead(long bytesRead) {
this.bytesRead = bytesRead;
}
public long getContentLength() {
return contentLength;
}
public void setContentLength(long contentLength) {
this.contentLength = contentLength;
}
public long getStartTime() {
return startTime;
}
public void setStartTime(long startTime) {
this.startTime = startTime;
}
public int getItems() {
return items;
}
public void setItems(int items) {
this.items = items;
}
}
Upload中记录了上传开始的时间,用于计算上传速率、估计上传总时间等等。
监听上传进度:处理文件上传的Serv