`
huhubinbin_
  • 浏览: 70262 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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 : plosson@users.sourceforge.net
*/
--%>
<%
    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.
    }
%>

分享到:
评论

相关推荐

    struts2+ajax文件进度条的实现

    总的来说,"struts2+ajax文件进度条的实现"是一个典型的前后端协同工作的示例,它展示了如何在Java web应用中优化用户体验,特别是在处理大文件上传时。通过理解Ajax的工作原理、Struts2的文件上传机制以及前端组件...

    ajax上传文件进度条及springMVC上传

    1. **Ajax上传文件**: 在前端,我们可以使用XMLHttpRequest对象或者jQuery的Ajax方法来实现文件的异步上传。创建一个`&lt;input type="file"&gt;`元素供用户选择文件,然后监听其`change`事件。当用户选择文件后,读取...

    ajax上传进度条,form上传文件进度条

    在现代Web应用中,用户界面的交互性和用户体验是至关重要的,而“ajax上传进度条”和“form上传文件进度条”就是提升这方面体验的重要技术。本文将深入探讨这两种技术的原理、实现方式以及如何在实际项目中应用。 ...

    ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签

    在这个项目中,SSH2框架与Ajax技术结合,实现了一个带进度条的文件上传功能,并且这个功能已经被封装成了自定义标签,方便在页面上直接使用。 首先,让我们深入理解SSH框架的每个组件: 1. **Struts2**:Struts2是...

    Ajax实现文件上传进度条

    // 进行Ajax上传操作 }); ``` 3. **创建Ajax请求**:创建XMLHttpRequest对象,设置请求方法、URL、同步/异步属性等,然后创建FormData对象,将文件添加到其中。 ```javascript var xhr = new XMLHttpRequest(); ...

    jquery ajax上传 带进度条

    总结来说,"jquery ajax上传 带进度条"涉及到使用jQuery和Uploadify插件实现文件上传功能,并通过AJAX实时更新上传进度条,从而提供一个友好的用户界面。服务器端的处理同样重要,需要接收文件并给予适当的响应。...

    ASP.NET Ajax 文件上传进度条源码示例

    随着ajax技术的流行以及用户体验得到越来越高的重视,各种注视用户体验的程序出现,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传.Ajax 文件上传进度条,ASP.NET 文件上传...

    ajax带进度条的上传功能

    要实现带进度条的Ajax上传,关键在于HTML5的File API和ProgressEvent接口。File API允许我们直接访问和操作用户选择的文件,包括读取文件内容、获取文件信息等。ProgressEvent则提供了监控上传进度的方法。 1. **...

    Ajax实现上传文件进度条

    在现代Web应用中,用户...不过,需要注意的是,由于同源策略的限制,Ajax上传仅限于同一源下的请求,跨域上传需要服务器配置CORS策略。此外,大文件上传可能会遇到浏览器内存限制问题,这时可以考虑使用分块上传技术。

    Ajax上传文件进度条Codular

    现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到...

    Layui实现文件上传进度条

    要实现文件上传进度条,我们需要使用到Layui的AjaxUpload组件,该组件可以用来上传文件并显示上传进度。我们可以使用`layui.upload`方法来上传文件,并使用`on`方法来监听上传进度。 例如: ```javascript layui....

    ajax文件上传进度条

    以下是如何使用jQuery和Apache FileUpload实现Ajax文件上传进度条的步骤: 1. **HTML结构**:创建一个文件输入元素和进度条元素。 ```html &lt;div id="progressBar"&gt;&lt;/div&gt; ``` 2. **jQuery绑定事件**:监听文件选择...

    ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签)

    标题 "ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签)" 涉及到的是一个基于Java Web的项目,利用了Struts2、Spring2.5、Hibernate3.3和Ajax技术,实现了文件上传并带有进度条显示的功能...

    ajax 无刷新上传文件带进度条

    在现代Web应用中,用户界面的流畅性和交互性至关重要,"Ajax无刷新上传文件带进度条"技术就很好地满足了这一需求。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的...

    c# 上传文件进度条

    在Web应用程序中,通常会使用Ajax方式进行文件上传,以实现异步操作,避免页面刷新。一种常用的jQuery插件是`jQuery File Upload`,它支持多文件选择、文件预览、进度条显示、取消上传等功能。要使用该插件,首先在...

    带进度条上传源码Ajax(支持大文件)

    这个压缩包提供了一种实现方式,即“带进度条的上传源码”,通过AJAX技术实现无刷新的文件上传,极大地提升了用户体验。让我们详细了解一下这个源码的核心知识点。 首先,**AJAX (Asynchronous JavaScript and XML)...

    java 和ajax编写带进度条的附件上传

    开发者可以通过查看这些文件,学习如何将Java后端与Ajax前端结合起来,实现带进度条的文件上传功能。 总的来说,这个话题涵盖了Java后端处理、Ajax异步通信、HTML5的FormData和进度条元素、以及前端JavaScript的...

    java jsp ajax实现上传文件进度条(详细代码和文档)

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 重写的解析器提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后将此数据缓存起来,前端发送异步...

    asp Ajax无刷新文件上传(带进度条,无组件)

    3. 进度条实现:XMLHttpRequest对象的onprogress事件可以获取上传进度,根据已发送的数据量与总数据量计算出进度,更新进度条显示。 三、实现步骤 1. 创建HTML界面:包括文件输入控件、提交按钮和进度条元素。设置...

Global site tag (gtag.js) - Google Analytics