亭ting 通过本文主要向大家介绍了struts2进度条,struts2 上传进度条,struts2拦截器实例,struts2实例,struts2项目实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近在写我们大三项目的一个视频文件上传的页面，实现后台对上传的进度进行监听，然后将监听的信息返回给前台页面。
前台的页面效果图：
前台进度条控件选择使用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" >帮助中心</