ajax上传文件进度条实现
主要是通过UploadListener 监听服务端接收了多少字节,返回给客户端,由javascript,div,css来操作进度条的显示
public class UploadListener implements OutputStreamListener
{
private HttpServletRequest request;
private long delay = 0;
private long startTime = 0;
private int totalToRead = 0;
private int totalBytesRead = 0;
private int totalFiles = -1;
public UploadListener(HttpServletRequest request, long debugDelay)
{
this.request = request;
this.delay = debugDelay;
totalToRead = request.getContentLength();
this.startTime = System.currentTimeMillis();
}
public void start()
{
totalFiles ++;
updateUploadInfo("start");
}
public void bytesRead(int bytesRead)
{
totalBytesRead = totalBytesRead + bytesRead;
updateUploadInfo("progress");
try
{
Thread.sleep(delay);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}
public void error(String message)
{
updateUploadInfo("error");
}
public void done()
{
updateUploadInfo("done");
}
private long getDelta()
{
return (System.currentTimeMillis() - startTime) / 1000;
}
private void updateUploadInfo(String status)
{
long delta = (System.currentTimeMillis() - startTime) / 1000;
request.getSession().setAttribute("uploadInfo", new UploadInfo(totalFiles, totalToRead, totalBytesRead,delta,status));
}
}
上面的代码中,原作者为了演示本机操作上的显示效果,特别加入了debugDelay做延时处理,在实际应用中可以删除。
upload.jsp:
<%@ page import="be.telio.mediastore.ui.upload.MonitoredDiskFileItemFactory" %>
<%@ page import="be.telio.mediastore.ui.upload.UploadListener" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%@ page import="org.apache.commons.fileupload.FileItemFactory" %>
<%@ page import="org.apache.commons.fileupload.FileUploadException" %>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
/* Licence:
* Use this however/wherever you like, just don't blame me if it breaks anything.
*
* Credit:
* If you're nice, you'll leave this bit:
*
* Class by Pierre-Alexandre Losson -- http://www.telio.be/blog
* email : p