具体请下载源代码:
(1)写文件上传进度监听器类:
package com.my.other;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
public class UploadProgressListener implements ProgressListener {
private long megaBytes = -1;
HttpServletRequest request = null;
UploadInfo progressInfo = null;
public UploadProgressListener(HttpServletRequest request) {
this.request = request;
progressInfo = (UploadInfo)request.getSession().getAttribute("uploadInfo");
if (progressInfo == null) {
progressInfo = new UploadInfo();
request.getSession().setAttribute("uploadInfo", progressInfo);
}
}
public void update(long pBytesRead, long pContentLength, int pItems) {
long mBytes = pBytesRead / 100000;
if (megaBytes == mBytes) {
return;
}
megaBytes = mBytes;
if (pContentLength == -1) {
progressInfo.setStatus("done");
} else {
progressInfo.setFileIndex(pItems);
progressInfo.setTotalSize(pContentLength);
progressInfo.setBytesRead(pBytesRead);
progressInfo.setStatus("progress");
}
}
}
(2)在action中代码如下:
package com.my.other;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.DiskFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class UploadAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
request.setCharacterEncoding("utf-8");
UploadProgressListener pl = new UploadProgressListener(request);
long start_time = System.currentTimeMillis();
DiskFileUpload fu = new DiskFileUpload();
fu.setProgressListener(pl);
List items = fu.parseRequest(request);
for (int i = 0; i < items.size(); i++) {
FileItem fi = (FileItem)items.get(i);
if (fi.isFormField()) {
} else {
if ("".equals(fi.getName().trim())) {
continue;
}
//取文件内容
String filename = fi.getName();
int pos = filename.lastIndexOf("\\");
filename = filename.substring(pos + 1);
fi.write(new File(this.getServlet().getServletContext().getRealPath("//")
+ "//files//" + filename));
}
}
long end_time = System.currentTimeMillis();
System.out.println("Used time:" + (end_time - start_time ) );
return mapping.findForward("success");
}
}
(3)dwr.xml文件配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="UploadMonitor" creator="new">
<param name="class">com.my.other.UploadMonitor</param>
</create>
<convert match="com.my.other.UploadInfo" converter="bean"></convert>
</allow>
</dwr>
(4)dwr调用的服务类:
package com.my.other;
import org.directwebremoting.WebContextFactory;
import javax.servlet.http.HttpServletRequest;
public class UploadMonitor
{
public UploadInfo getUploadInfo()
{
HttpServletRequest req = WebContextFactory.get().getHttpServletRequest();
if (req.getSession().getAttribute("uploadInfo") != null)
return (UploadInfo) req.getSession().getAttribute("uploadInfo");
else {
return new UploadInfo();
}
}
}
(5)进度信息对象
package com.my.other;
public class UploadInfo
{
private long totalSize = 0;
private long bytesRead = 0;
private long elapsedTime = 0;
private String status = "done";
private int fileIndex = 0;
public UploadInfo()
{
}
public String getStatus()
{
return status;
}
public void setStatus(String status)
{
this.status = status;
}
public long getTotalSize()
{
return totalSize;
}
public void setTotalSize(long totalSize)
{
this.totalSize = totalSize;
}
public long getBytesRead()
{
return bytesRead;
}
public void setBytesRead(long bytesRead)
{
this.bytesRead = bytesRead;
}
public long getElapsedTime()
{
return elapsedTime;
}
public void setElapsedTime(long elapsedTime)
{
this.elapsedTime = elapsedTime;
}
public boolean isInProgress()
{
return "progress".equals(status) || "start".equals(status);
}
public int getFileIndex()
{
return fileIndex;
}
public void setFileIndex(int fileIndex)
{
this.fileIndex = fileIndex;
}
}
(6)页面文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='/StrutsFileUpload/dwr/interface/UploadMonitor.js'></script>
<script type='text/javascript' src='/StrutsFileUpload/dwr/engine.js'></script>
<script type='text/javascript' src='/StrutsFileUpload/dwr/util.js'></script>
<script type='text/javascript' src='/StrutsFileUpload/resources/upload.js'> </script>
<style type="text/css">
#progressBar { padding-top: 5px; }
#progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}
#progressBarBoxContent { width: 0; height: 20px; border-right: 1px solid #444; background: #9ACB34; }
</style>
</head>
<body>
<h1>文件上传演示</h1><br>
<form action="upload.do" method="post" enctype="multipart/form-data" onsubmit="startProgress()">
学生编码:<input type="text" name="code" value="001"><br>
学生姓名:<input type="text" name="name" value="zhangsan"><br>
附件1:<input type="file" name="file1" id="file1"><br>
附件2:<input type="file" name="file2" id="file2"><br>
<div id="progressBar" style="display: none">
<div id="theMeter">
<div id="progressBarText"></div>
<div id="progressBarBox">
<div id="progressBarBoxContent"></div>
</div>
</div>
</div>
<input type="submit" value="提交" id="uploadbutton">
<input type="reset">
</form>
</body>
</html>
分享到:
相关推荐
以上就是一个使用PHP和APC扩展实现大文件上传带进度条的基本流程。通过这种方法,我们可以避免一次性加载大文件,分块上传降低了服务器内存压力,同时也提供了良好的用户体验,用户可以看到文件上传的实时进度。需要...
**SWFUpload 多文件上传带进度条实例详解** SWFUpload 是一款开源的JavaScript库,专门用于在网页上实现文件的多选上传,并且支持显示上传进度条,为用户提供更好的交互体验。在这个实例中,我们将探讨如何在VS2012...
本资源"layui文件上传带进度条显示.zip"结合了`layui`与`PHP`,实现了文件上传过程中带有进度条的交互效果,提升了用户体验。 首先,我们要理解`layui`的文件上传组件是如何工作的。`layui`的上传组件基于HTML5的`...
#### 标题解析:“文件上传 带进度条 非常漂亮!” 标题强调了文件上传功能的一个关键特性——带有美观进度条的上传机制。这表明在进行文件传输时,用户能够直观地看到上传的进度,提供了一个更友好、更互动的用户...
本项目"web 大文件上传 带进度条"显然是针对这个需求提供的一种解决方案,通过ASP.NET技术实现。 首先,我们来分析一下项目中的主要文件: 1. `Default.aspx` 和 `upload.aspx`:这两个是ASP.NET的页面文件,分别...
在Java和jQuery的世界里,实现文件上传带进度条的功能是一项常见的需求,特别是在用户交互体验日益重要的今天。这个功能可以提供给用户一个实时反馈,让他们了解文件上传的状态,从而提升用户体验。接下来,我们将...
在Struts中,可以实现单文件和多文件的上传,并且为了提升用户体验,我们还可以添加进度条来显示文件上传的状态。本文将详细介绍如何在Struts中实现这两个功能,并带上传进度条。 首先,我们需要了解Struts中处理...
**SwfUpload 多文件上传带进度条 JavaWeb 项目详解** SwfUpload 是一个流行的JavaScript库,它允许用户在浏览器端实现文件的批量上传,同时提供进度条展示上传进度,提高了用户体验。在这个JavaWeb项目中,...
为了提升用户体验,"文件上传带进度条"的功能变得越来越重要。它可以让用户在上传大文件时了解上传进度,增加等待过程的可视性和可预测性,减少用户焦虑。在本案例中,我们将探讨如何在ASP.NET框架下实现这样的功能...
本示例中的"Java 文件上传带进度条源码"提供了一个具体的解决方案,适用于使用Tomcat7服务器和Java 7开发环境。 首先,我们需要理解文件上传的基本流程。在Web应用中,文件上传通常涉及到HTTP协议中的POST请求,...
在ASP.NET中实现文件上传带进度条的功能,通常涉及到AJAX技术,以便提供更好的用户体验。在传统的文件上传中,用户可能会遇到页面刷新或者长时间无响应的情况,而通过AJAX技术,我们可以实现异步文件上传,同时展示...
"支持超大文件上传带进度条示例"这个主题聚焦于如何在上传大文件时提供用户体验优化,即通过进度条来显示文件上传进度。这通常涉及到前端与后端的协同工作,以及对大文件处理的特殊技术策略。 首先,超大文件上传的...
"fileupload文件上传带进度条"的实现是用户界面(UI)优化的重要部分,因为它提供了更好的用户体验,让用户能够实时了解文件上传的进度,减少了操作的不确定性。在这个主题中,我们将深入探讨如何实现单文件上传并带...
综上所述,实现ASP.NET中的大文件上传并带有进度条功能,涉及到的技术点广泛,包括文件分块、合并、进度条UI、错误处理、安全控制等。理解这些知识点并能够灵活应用,对于开发高效且用户体验良好的文件上传系统至关...
"带进度条"是Uploaddify的一个重要特性,它提供了可视化的上传进度指示,让用户了解文件上传的状态,增强了交互性和用户满意度。在上传过程中,进度条会实时更新,显示当前文件的上传进度,直至上传完成。 "经过...
Java 文件上传带进度条的功能是通过结合Ajax技术与Struts2框架中的ProgressListener接口来实现的,以便在用户界面实时展示文件上传的进度。以下是详细的知识点解释: 1. **Ajax 进度查询机制**: - 在客户端,使用...
【ASP.NET Web版 WebUploader大文件上传带进度条】是一个针对ASP.NET 4.0 Web应用程序的文件上传解决方案,特别适合处理大文件并提供实时的上传进度反馈。WebUploader是一款前端JavaScript库,它允许用户在浏览器端...
在ASP.NET平台上,使用C#开发多文件上传并带有进度条功能是一项常见的需求,它可以提供用户友好的体验,尤其在处理大文件时。这个实例"asp.net C# 多文件上传带进度条的上传实例"就是一个很好的解决方案,实现了在不...
"Struts2文件上传带进度条页面无刷新"的实现涉及多个技术点,包括Struts2的文件上传插件、AJAX异步通信以及前端进度条展示。 首先,Struts2的文件上传依赖于`struts2-upload-plugin`。这个插件扩展了Struts2的核心...