Struts2 文件上传进度条的实现实例代码
发布时间 - 2026-01-11 00:58:31 点击率：次最近在写我们大三项目的一个视频文件上传的页面，实现后台对上传的进度进行监听，然后将监听的信息返回给前台页面。
前台的页面效果图：
前台进度条控件选择使用easyui 的progressbar控件。
详细的使用说明参考官网文档：http://www.jeasyui.com/documentation/index.php
所有需要引入jquery-1.11.1.min.js 以及jquery.easyui.min.js
一.前台的代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >
<title>My JSP 'uploadVideo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="demo.css" rel="external nofollow" />
<link rel="stylesheet" href="easyui.css" rel="external nofollow" />
<link rel="stylesheet" href="icon.css" rel="external nofollow" />
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="jquery.easyui.min.js" ></script>
<link rel="stylesheet" href="videoCss/upload.css" rel="external nofollow" />
<script>
$(function() {
var pro=0;
$("#save").click(function(){
saveDate();
setinterval=setInterval(showUploadProgress, 100);
});
function saveDate(){
var form = new FormData(document.getElementById("form"));
$.ajax({
type:"POST",
url:"uploadfile.action",
data:form,
async:false,
cache:false,
processData:false,
contentType:false,
success:function(result){
var msg=result.msg;
$(".msg").text(msg);
},
error:function(){
alert("file异步提交失败");
}
});
}
function showUploadProgress(){
$.ajax({
type:"GET",
url:"uploadProgress.action",
dataType:"json",
async:false,
cache:false,
success:function(result){
var progressInfo=result.progressInfo;
pro=progressInfo.percent;
if(pro==100){
clearInterval(setinterval);
}
$('#progress').progressbar('setValue', progressInfo.percent);
$('progress-bar-status').find(".speed").text(progressInfo.velocity);
$('progress-bar-status').find(".finished").text("已上传:"+progressInfo.length+"/"+progressInfo.totalLength);
$('progress-bar-status').find(".remain").text(progressInfo.timeLeft);
},
error:function(result){
alert("error1");
}
});
}
});
</script>
</head>
<body>
<div class="main_wrapper">
<div class="head_wrapper">
<div class="headinside">
<ul>
<li><a href="">主站</a></li>
<li><a href="">视频栏</a></li>
<li><a href="">资源区</a></li>
<li><a href="">个人中心</a></li>
</ul>
</div>
</div><!--head_wrapper结束-->
<div class="upload_box">
<p id="error">
<s:fielderror name="struts.messages.error.content.type.not.allowed"></s:fielderror>
<s:actionerror/>
<font color="red" class="msg">${msg }</font>
</p>
<div class="uploadInfo">
<span class="title">
当前上传：
<span class="filename">文件名</span>
</span>
<div id="progress" class="easyui-progressbar" style="width:400px;"></div>
<div class="progress-bar-status">
<span class="speed" style="display: none;">当前上传的速度:80.23k/s</span>
<span class="finished">已上传:10.86M/10.86M</span>
<span class="remain" style="display:none">剩余时间:00秒</span>
</div>
<div class="videoInfo">
<form method="post" enctype="multipart/form-data" id="form">
<ul>
<li>
<div>
<label for="video1">文件上传</label>
<input type="file" id="btn_file" name="video"/>
</div>
</li>
<li>
<label for="name">标题</label>
<input type="text" name="name" id="name" title="标题" placeholder="给你的视频七个标题名吧"/>
</li>
<li>
<div>
<label for="cate">分类</label>
<select class="cate" id="cate" name="cate">
<option value ="1">传统文学</option>
<option value ="2">民间手工艺</option>
<option value="3">节假日常</option>
</select>
</div>
</li>
<li>
<div>
<label for="tag">标签</label>
<input type="text" name="tag" id="tag" placeholder="请给您的视频添加相应的标签"/>
</div>
</li>
<li>
<div>
<label for="desc" id="label_desc">描述</label>
<textarea name="videoDesc" id="desc" placeholder="请添加相应的视频描述" >
</textarea>
</div>
</li>
<input id="save" type="button" value="保存"/>
<!-- <button id="save">保存</button> -->
</ul>
</form>
</div>
</div>
</div>
</div>
<div style="width: 100%;">
<div class="footer" style="width: 100%;">
<div class="inner">
<p class="a_menu">
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a>
<i class="line">|</i>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系合作</a>
<i class="line">|</i>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >帮助中心</a>
<i class="line">|</i>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >合伙人计划</a>
<i class="line">|</i>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >版权声明</a>
</p>
<p class="center">
<span>江西师范大学瑶湖校区</span>
<span>java工作室</span>
<br>
copyright© 大白
</p>
</div>
</div>
</div>
</body>
</html>
二.点击上传后，如何获得文上传的进度信息。
1.自定义一个UploadListener类实现org.apache.commons.fileupload中的ProgressListener接口，从而获得当前上传的文件的已读取的数据长度，文件总长度，正在保存第几个文件；
2.重写一个MyMultiPartRequest类，覆盖org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest，改写parseRequest方法，在其中为上传添加监听器；
3.定义一个UploadStatus bean类存放上传的状态信息，并将获得上传进度信息的UploadStatus对象存在在Session域中;
4.编写UploadListenAction，获取Session域中的UploadStatus对象，进行相应的数据处理，然后将需要的数据放入Map中以json的形式返回给jsp;
5.编写UploadFile.action，实现文件的上传存储;
三.相对应的代码。
package video.action;
import org.apache.commons.fileupload.ProgressListener;
public class UploadListener implements ProgressListener {
private UploadStatus status;
public UploadListener(UploadStatus status) {
this.status = status;
}
public void update(long bytesRead, long contentLength, int items) {
// 上传组件会调用该方法
status.setBytesRead(bytesRead); // 已读取的数据长度
status.setContentLength(contentLength); // 文件总长度
status.setItems(items); // 正在保存第几个文件
}
}
对于步骤2中MyMultiPartRequest修改后的方法代码。
protected List<FileItem> parseRequest(HttpServletRequest servletRequest, String saveDir) throws FileUploadException {
UploadStatus status = new UploadStatus(); // 上传状态
UploadListener listner = new UploadListener(status); // 监听器
servletRequest.getSession().setAttribute("uploadStatus", status);//将上传的进度状态存放进Session;
DiskFileItemFactory fac = createDiskFileItemFactory(saveDir);
ServletFileUpload upload = createServletFileUpload(fac);
upload.setProgressListener(listner);// 添加监听器
return upload.parseRequest(createRequestContext(servletRequest));
}
package video.action;
public class UploadStatus {
private long bytesRead; // 已经上传的字节数，单位：字节
private long contentLength; // 所有文件的总长度，单位：字节
private int items; // 正在上传第几个文件
private long startTime = System.currentTimeMillis(); // 开始上传的时间，用于计算上传速度等
public long getBytesRead() {
return bytesRead;
}
public void setBytesRead(long bytesRead) {
this.bytesRead = bytesRead;
}
public long getContentLength() {
return contentLength;
}
public void setContentLength(long contentLength) {
this.contentLength = contentLength;
}
public int getItems() {
return items;
}
public void setItems(int items) {
this.items = items;
}
public long getStartTime() {
return startTime;
}
public void setStartTime(long startTime) {
this.startTime = startTime;
}
}
package video.action;
import java.util.HashMap;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;
public class UploadListenAction extends ActionSupport implements SessionAware{
private UploadStatus status;
Map<String,Object> session;
Map<String,String> progressInfo=new HashMap<>();
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
status=(UploadStatus)session.get("uploadStatus");
if(status!=null){
long startTime = status.getStartTime(); //上传开始时间
long currentTime = System.currentTimeMillis(); //现在时间
long time = (currentTime - startTime)/ 1000 + 1; //已传输的时间 单位:s
//传输速度单位:byte/s
double velocity = ((double)status.getBytesRead()/1000) / (double)time;
//估计总时间
double totalTime = status.getContentLength()/velocity;
//估计剩余时间
double timeLeft = totalTime - time;
//已经完成的百分比
int percent = (int)(100 * (double)status.getBytesRead() / (double)status.getContentLength());
//已经完成数单位:m
double length = ((double) status.getBytesRead())/1024/1024;
//总长度 单位:m
double totalLength = ((double) status.getContentLength())/1024/1024;
progressInfo.put("percent", String.valueOf(percent));
progressInfo.put("velocity", String.valueOf(velocity));
progressInfo.put("totalTime", String.valueOf(totalTime));
progressInfo.put("timeLeft", String.valueOf(timeLeft));
progressInfo.put("length", String.valueOf(length));
progressInfo.put("totalLength", String.valueOf(totalLength));
}
return super.execute();
}
@Override
public void setSession(Map<String, Object> session) {
// TODO Auto-generated method stub
this.session=session;
}
public Map<String, String> getProgressInfo() {
return progressInfo;
}
/*public UploadStatus getStatus() {
return status;
}*/
}
package video.action;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import javax.servlet.ServletContext;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.SessionAware;
import video.dao.UploadDao;
import video.daoimpl.UploadDaoImpl;
import videomodel.VideoInfo;
import cn.history.pojo.User;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadFile extends ActionSupport{
private static final long serialVersionUID = 4182168930616232826L;
private String name; //标题名
private File video;
private String videoFileName;
private String videoContentType;
private String videoDesc; //描述
private int cate; //类型
private String tag; //标签
/*private VideoInfo videoInfo=new VideoInfo();*/
private String msg;
private UploadDao uploadDao=new UploadDaoImpl();
public String upload() throws Exception{
//完成上传
ServletContext sc=ServletActionContext.getServletContext();
String directory=sc.getRealPath("/video");//得到存放文件的真是目录
//根据视频的不同类型，存放在不同的目录下
if(cate==1){ //如果是传统文学
directory=directory+"/guoxue";
}else if(cate==2){
directory=directory+"/minjian";
}else{
directory=directory+"/jiari";
}
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmssS");//格式化时间输出
String Rname=null;
if(name!=null&&!name.equals("")){
Rname=name+"_"+sdf.format(new Date())+".mp4";
}else{
Rname=videoFileName;
}
System.out.println(Rname);
//构建目标文件
File target=new File(directory,Rname);
FileUtils.copyFile(video, target);
System.out.println(Rname+"\n"+videoFileName+"\n"+videoDesc+"\n"+videoContentType);
//将成功上传的视频基本信息保存至数据库m
String filePath=target.getPath();
filePath=filePath.substring(filePath.indexOf("video")).replace("\\", "/");
System.out.println(filePath);
VideoInfo videoInfo=new VideoInfo();
videoInfo.setVideoName(Rname);
videoInfo.setVideoDesc(videoDesc);
videoInfo.setVideoUrl(filePath);
videoInfo.setCate(cate);
videoInfo.setTag(tag);
//ActionContext.getContext().getSession().get("name");
if(ActionContext.getContext().getSession().get("user")!=null){
User user=(User) ActionContext.getContext().getSession().get("user");
videoInfo.setAuthorId(user.getUser_id());
}else{
//设置为管理员的id，默认是管理员上传的
videoInfo.setAuthorId(1);
}
int tag=uploadDao.saveVideo(videoInfo);
if(tag==0){
msg="上传失败(存储数据库过程出错)";
return INPUT;
}else{
msg="视频上传成功";
}
return SUCCESS;
}
/* public VideoInfo getVideoInfo() {
return videoInfo;
}
public void setVideoInfo(VideoInfo videoInfo) {
this.videoInfo = videoInfo;
}*/
/*public String getName() {
return name;
}*/
public void setName(String name) {
this.name = name;
}
// public File getVideo() {
// return video;
// }
public void setVideo(File video) {
System.out.println(video);
this.video = video;
}
// public String getVideoDesc() {
// return videoDesc;
// }
public void setVideoDesc(String videoDesc) {
this.videoDesc = videoDesc;
}
/*public int getCate() {
return cate;
}*/
public void setCate(int cate) {
this.cate = cate;
}
/*public String getTag() {
return tag;
}*/
public void setTag(String tag) {
this.tag = tag;
}
// public String getVideoFileName() {
// return videoFileName;
// }
public void setVideoFileName(String videoFileName) {
this.videoFileName = videoFileName;
}
/*public String getVideoContentType() {
return videoContentType;
}*/
public void setVideoContentType(String videoContentType) {
this.videoContentType = videoContentType;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# struts2上传进度条
# struts2文件上传
# struts2
# 进度条
# Struts2实现上传单个文件功能
# Struts2访问Servlet的三种方式
# struts2如何使用拦截器进行用户权限控制实例
# Struts2拦截器登录验证实例
# Struts2之Validator验证框架的详细介绍
# struts2框架入门
# Struts2的输入校验实例代码
# 详解struts2的token机制和cookie来防止表单重复提交
# 上传
# 几个
# 总长度
# 文件上传
# 您的
# 放在
# 并将
# 大白
# 自定义
# 数据处理
# 重写
# 关于我们
# 设置为
# 三项
# 帮助中心
# 版权声明
# 不同类型
# 中以
# 官网
# 相对应
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
三星网站视频制作教程下载,三星w23网页如何全屏？
如何在香港免费服务器上快速搭建网站？
INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】
canvas 画布在主流浏览器中的尺寸限制详细介绍
Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】
google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤
移动端脚本框架Hammer.js
Laravel怎么判断请求类型_Laravel Request isMethod用法
Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】
JavaScript如何操作视频_媒体API怎么控制播放
广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？
如何用wdcp快速搭建高效网站？
七夕网站制作视频,七夕大促活动怎么报名？
成都品牌网站制作公司,成都营业执照年报网上怎么办理？
Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践
香港服务器网站卡顿？如何解决网络延迟与负载问题？
香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南
Laravel怎么上传文件_Laravel图片上传及存储配置
佛山企业网站制作公司有哪些,沟通100网上服务官网？
Laravel观察者模式如何使用_Laravel Model Observer配置
Laravel模型事件有哪些_Laravel Model Event生命周期详解
Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧
Laravel如何实现用户密码重置功能？（完整流程代码）
Laravel怎么发送邮件_Laravel Mail类SMTP配置教程
北京网站制作的公司有哪些,北京白云观官方网站？
Laravel怎么使用Intervention Image库处理图片上传和缩放
微信小程序 scroll-view组件实现列表页实例代码
Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】
Laravel项目怎么部署到Linux_Laravel Nginx配置详解
如何在VPS电脑上快速搭建网站？
如何自定义建站之星模板颜色并下载新样式？
php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】
Laravel如何实现数据库事务？（DB Facade示例）
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】
Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询
独立制作一个网站多少钱,建立网站需要花多少钱？
Laravel怎么实现支付功能_Laravel集成支付宝微信支付
Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】
如何注册花生壳免费域名并搭建个人网站？
Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）
如何快速查询域名建站关键信息？
如何在IIS中新建站点并配置端口与IP地址？
浅述节点的创建及常见功能的实现
专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？
如何在万网主机上快速搭建网站？
详解jQuery中基本的动画方法
html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】
Win11关机界面怎么改_Win11自定义关机画面设置【工具】
Python自然语言搜索引擎项目教程_倒排索引查询优化案例
最新文章
Sublime怎么一键压缩JS代码 Su
sublime如何在搜索中使用正则表达式
Sublime如何设置透明窗口效果 Su
mysql如何设计商品表结构_mysql
css属性背景图不显示怎么办_通过检查路
如何使用Golang实现排序_Golan
农历闰月是怎么回事_为合回归年加一月调整
塑造《刺客信条》艾吉奥传奇的编剧离开育碧
1英里等于多少公里 1mile和km的换
css grid布局中行和列是如何定义的
PS批量旋转和翻转图片，快速校正图片方向
C# Swagger UI自定义方法 C
OPPO手机九宫格和全键盘怎么切换_OP
Go语言如何实现用户登录注册_Golan
1节飞行速度多少公里每小时 1节是多少公
纸嫁衣8千子树第五章庙门怎么开启 庙门
Laravel 多行数据编辑表单中实现逐
明日之后如何提升钓鱼等级 明日之后提升钓
支付宝怎样查年度账单_支付宝年度账单查看
C# 多线程UI更新Dispatcher