这篇文章将为大家详细讲解有关使用Struts2如何实现一个进度条功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。前台的页面效果图：前台进度条控件选择使用easyui 的progressba
这篇文章将为大家详细讲解有关使用Struts2如何实现一个进度条功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
前台的页面效果图：
前台进度条控件选择使用easyui 的progressbar控件。
一.前台的代码:
<%@ 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" ></div> <div class="progress-bar-status"> <span class="speed" >当前上传的速度:80.23k/s</span> <span class="finished">已上传:10.86M/10.86M</span> <span class="remain" >剩余时间: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 > <div class="footer" > <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>--结束END--
本文标题: 使用Struts2如何实现一个进度条功能
本文链接: https://www.lsjlt.com/news/226514.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0