最近在写我们大三项目的一个视频文件上传的页面，实现后台对上传的进度进行监听，然后将监听的信息返回给前台页面。
前台的页面效果图：
前台进度条控件选择使用easyui 的progressbar控件。
详细的使用说明参考官网文档：http://www.jeasyui.com/documentation/index.php
所有需要引入jquery-1.11.1.min.js 以及jquery.easyui.min.js
一.前台的代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
<%@ 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，实现文件的上传存储;
三.相对应的代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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修改后的方法代码。
|
1
2
3
4
5
6
7
8
9
10
11
|
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)); } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
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; }} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
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; }*/ } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
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; }} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.cnblogs.com/ting1996/p/6807088.html
