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 : [e-mail]
*/
--%>
<%
    UploadListener listener = new UploadListener(request, 30);

    // Create a factory for disk-based file items
    FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);

    // Create a new file upload handler
    ServletFileUpload upload = new ServletFileUpload(factory);

    try
    {
        // process uploads ..
        upload.parseRequest(request);
//....处理上传文件
    }
    catch (FileUploadException e)
    {
        e.printStackTrace();  //To change body of catch statement use File | Settings | File Templates.
    }
%>



整个应用已经打包放在附件里，请下载研究。

评论

3 楼 huhubinbin_ 2010-11-29  

jiayj198609 写道

主要是通过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 : [e-mail]
*/
--%>
<%
    UploadListener listener = new UploadListener(request, 30);

    // Create a factory for disk-based file items
    FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);

    // Create a new file upload handler
    ServletFileUpload upload = new ServletFileUpload(factory);

    try
    {
        // process uploads ..
        upload.parseRequest(request);
//....处理上传文件
    }
    catch (FileUploadException e)
    {
        e.printStackTrace();  //To change body of catch statement use File | Settings | File Templates.
    }
%>



整个应用已经打包放在附件里，请下载研究。

2 楼 cn-done 2010-11-27  

大概原理弄清楚了：
其中outputstreamlistener在上传的过程中起到监听读取多少字节数的功能，然后将实时状态保存到session中。页面ajax应该是定时轮询去取这个状态，根据这个状态来确定进度条的显示情况。

不知道理解的是否正确。

1 楼 guimingyue 2010-11-26  

楼主能不能将这个做一个pdf的教程！谢谢.....