主要是通过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文件进度条的实现"是一个典型的前后端协同工作的示例,它展示了如何在Java web应用中优化用户体验,特别是在处理大文件上传时。通过理解Ajax的工作原理、Struts2的文件上传机制以及前端组件...
1. **Ajax上传文件**: 在前端,我们可以使用XMLHttpRequest对象或者jQuery的Ajax方法来实现文件的异步上传。创建一个`<input type="file">`元素供用户选择文件,然后监听其`change`事件。当用户选择文件后,读取...
在现代Web应用中,用户界面的交互性和用户体验是至关重要的,而“ajax上传进度条”和“form上传文件进度条”就是提升这方面体验的重要技术。本文将深入探讨这两种技术的原理、实现方式以及如何在实际项目中应用。 ...
在这个项目中,SSH2框架与Ajax技术结合,实现了一个带进度条的文件上传功能,并且这个功能已经被封装成了自定义标签,方便在页面上直接使用。 首先,让我们深入理解SSH框架的每个组件: 1. **Struts2**:Struts2是...
// 进行Ajax上传操作 }); ``` 3. **创建Ajax请求**:创建XMLHttpRequest对象,设置请求方法、URL、同步/异步属性等,然后创建FormData对象,将文件添加到其中。 ```javascript var xhr = new XMLHttpRequest(); ...
总结来说,"jquery ajax上传 带进度条"涉及到使用jQuery和Uploadify插件实现文件上传功能,并通过AJAX实时更新上传进度条,从而提供一个友好的用户界面。服务器端的处理同样重要,需要接收文件并给予适当的响应。...
随着ajax技术的流行以及用户体验得到越来越高的重视,各种注视用户体验的程序出现,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传.Ajax 文件上传进度条,ASP.NET 文件上传...
要实现带进度条的Ajax上传,关键在于HTML5的File API和ProgressEvent接口。File API允许我们直接访问和操作用户选择的文件,包括读取文件内容、获取文件信息等。ProgressEvent则提供了监控上传进度的方法。 1. **...
在现代Web应用中,用户...不过,需要注意的是,由于同源策略的限制,Ajax上传仅限于同一源下的请求,跨域上传需要服务器配置CORS策略。此外,大文件上传可能会遇到浏览器内存限制问题,这时可以考虑使用分块上传技术。
现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到...
要实现文件上传进度条,我们需要使用到Layui的AjaxUpload组件,该组件可以用来上传文件并显示上传进度。我们可以使用`layui.upload`方法来上传文件,并使用`on`方法来监听上传进度。 例如: ```javascript layui....
以下是如何使用jQuery和Apache FileUpload实现Ajax文件上传进度条的步骤: 1. **HTML结构**:创建一个文件输入元素和进度条元素。 ```html <div id="progressBar"></div> ``` 2. **jQuery绑定事件**:监听文件选择...
标题 "ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签)" 涉及到的是一个基于Java Web的项目,利用了Struts2、Spring2.5、Hibernate3.3和Ajax技术,实现了文件上传并带有进度条显示的功能...
在现代Web应用中,用户界面的流畅性和交互性至关重要,"Ajax无刷新上传文件带进度条"技术就很好地满足了这一需求。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的...
在Web应用程序中,通常会使用Ajax方式进行文件上传,以实现异步操作,避免页面刷新。一种常用的jQuery插件是`jQuery File Upload`,它支持多文件选择、文件预览、进度条显示、取消上传等功能。要使用该插件,首先在...
3. 进度条实现:XMLHttpRequest对象的onprogress事件可以获取上传进度,根据已发送的数据量与总数据量计算出进度,更新进度条显示。 三、实现步骤 1. 创建HTML界面:包括文件输入控件、提交按钮和进度条元素。设置...
这个压缩包提供了一种实现方式,即“带进度条的上传源码”,通过AJAX技术实现无刷新的文件上传,极大地提升了用户体验。让我们详细了解一下这个源码的核心知识点。 首先,**AJAX (Asynchronous JavaScript and XML)...
开发者可以通过查看这些文件,学习如何将Java后端与Ajax前端结合起来,实现带进度条的文件上传功能。 总的来说,这个话题涵盖了Java后端处理、Ajax异步通信、HTML5的FormData和进度条元素、以及前端JavaScript的...
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 重写的解析器提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后将此数据缓存起来,前端发送异步...