最近在寫我們大三項目的一個視頻文件上傳的頁面，實現(xiàn)后臺對上傳的進(jìn)度進(jìn)行監(jiān)聽，然后將監(jiān)聽的信息返回給前臺頁面。
前臺的頁面效果圖：
前臺進(jìn)度條控件選擇使用easyui 的progressbar控件。
詳細(xì)的使用說明參考官網(wǎng)文檔：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="">資源區(qū)</a></li> <li><a href="">個人中心</a></li> </ul> </div> </div><!--head_wrapper結(jié)束--> <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"> 當(dāng)前上傳： <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;">當(dāng)前上傳的速度: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">標(biāo)題</label> <input type="text" name="name" id="name" title="標(biāo)題" placeholder="給你的視頻七個標(biāo)題名吧"/> </li> <li> <div> <label for="cate">分類</label> <select class="cate" id="cate" name="cate"> <option value ="1">傳統(tǒng)文學(xué)</option> <option value ="2">民間手工藝</option> <option value="3">節(jié)假日常</option> </select> </div> </li> <li> <div> <label for="tag">標(biāo)簽</label> <input type="text" name="tag" id="tag" placeholder="請給您的視頻添加相應(yīng)的標(biāo)簽"/> </div> </li> <li> <div> <label for="desc" id="label_desc">描述</label> <textarea name="videoDesc" id="desc" placeholder="請?zhí)砑酉鄳?yīng)的視頻描述" > </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" >關(guān)于我們</a> <i class="line">|</i> <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >聯(lián)系合作</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" >版權(quán)聲明</a> </p> <p class="center"> <span>江西師范大學(xué)瑤湖校區(qū)</span> <span>java工作室</span> <br> copyright© 大白 </p> </div> </div> </div> </body></html> |
二.點擊上傳后，如何獲得文上傳的進(jìn)度信息。
1.自定義一個UploadListener類實現(xiàn)org.apache.commons.fileupload中的ProgressListener接口，從而獲得當(dāng)前上傳的文件的已讀取的數(shù)據(jù)長度，文件總長度，正在保存第幾個文件；
2.重寫一個MyMultiPartRequest類，覆蓋org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest，改寫parseRequest方法，在其中為上傳添加監(jiān)聽器；
3.定義一個UploadStatus bean類存放上傳的狀態(tài)信息，并將獲得上傳進(jìn)度信息的UploadStatus對象存在在Session域中;
4.編寫UploadListenAction，獲取Session域中的UploadStatus對象，進(jìn)行相應(yīng)的數(shù)據(jù)處理，然后將需要的數(shù)據(jù)放入Map中以json的形式返回給jsp;
5.編寫UploadFile.action，實現(xiàn)文件的上傳存儲;
三.相對應(yīng)的代碼。
|
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) { // 上傳組件會調(diào)用該方法 status.setBytesRead(bytesRead); // 已讀取的數(shù)據(jù)長度 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(); // 上傳狀態(tài) UploadListener listner = new UploadListener(status); // 監(jiān)聽器 servletRequest.getSession().setAttribute("uploadStatus", status);//將上傳的進(jìn)度狀態(tài)存放進(jìn)Session; DiskFileItemFactory fac = createDiskFileItemFactory(saveDir); ServletFileUpload upload = createServletFileUpload(fac); upload.setProgressListener(listner);// 添加監(jiān)聽器 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; // 已經(jīng)上傳的字節(jié)數(shù)，單位：字節(jié) private long contentLength; // 所有文件的總長度，單位：字節(jié) 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(); //現(xiàn)在時間 long time = (currentTime - startTime)/ 1000 + 1; //已傳輸?shù)臅r間 單位:s //傳輸速度單位:byte/s double velocity = ((double)status.getBytesRead()/1000) / (double)time; //估計總時間 double totalTime = status.getContentLength()/velocity; //估計剩余時間 double timeLeft = totalTime - time; //已經(jīng)完成的百分比 int percent = (int)(100 * (double)status.getBytesRead() / (double)status.getContentLength()); //已經(jīng)完成數(shù)單位: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; //標(biāo)題名 private File video; private String videoFileName; private String videoContentType; private String videoDesc; //描述 private int cate; //類型 private String tag; //標(biāo)簽 /*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");//得到存放文件的真是目錄 //根據(jù)視頻的不同類型，存放在不同的目錄下 if(cate==1){ //如果是傳統(tǒng)文學(xué) 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); //構(gòu)建目標(biāo)文件 File target=new File(directory,Rname); FileUtils.copyFile(video, target); System.out.println(Rname+"\n"+videoFileName+"\n"+videoDesc+"\n"+videoContentType); //將成功上傳的視頻基本信息保存至數(shù)據(jù)庫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{ //設(shè)置為管理員的id，默認(rèn)是管理員上傳的 videoInfo.setAuthorId(1); } int tag=uploadDao.saveVideo(videoInfo); if(tag==0){ msg="上傳失敗(存儲數(shù)據(jù)庫過程出錯)"; 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; }} |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：http://www.cnblogs.com/ting1996/p/6807088.html
