利用DWR实现文件上传进度条
来自telio.be的JS:
一个可以有其他页面引用的进度条页面:
在web.xml中增加如下对DwrServlet的配置:
1
/* Licence:
2
* Use this however/wherever you like, just don't blame me if it breaks anything.
3
*
4
* Credit:
5
* If you're nice, you'll leave this bit:
6
*
7
* Class by Pierre-Alexandre Losson -- http://www.telio.be/blog
8
* email : plosson@users.sourceforge.net
9
*/
10
function refreshProgress()
11
{
12
UploadMonitor.getUploadInfo(updateProgress);
13
}
14![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
function updateProgress(uploadInfo)
16
{
17
if (uploadInfo.inProgress)
18
{
19
document.getElementById('uploadbutton').disabled = true;
20
document.getElementById('file1').disabled = true;
21![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
22
var fileIndex = uploadInfo.fileIndex;
23![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
24
var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
25![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
26
document.getElementById('progressBarText').innerHTML = 'upload in progress: ' + progressPercent + '%';
27![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
28
document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
29![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
30
window.setTimeout('refreshProgress()', 1000);
31
}
32
else
33
{
34
document.getElementById('uploadbutton').disabled = false;
35
document.getElementById('file1').disabled = false;
36
}
37![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
38
return true;
39
}
40![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
41
function startProgress()
42
{
43
document.getElementById('progressBar').style.display = 'block';
44
document.getElementById('progressBarText').innerHTML = 'upload in progress: 0%';
45
document.getElementById('uploadbutton').disabled = true;
46![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
47
// wait a little while to make sure the upload has started ..
48
window.setTimeout("refreshProgress()", 1500);
49
return true;
50
}
51![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
16
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
17
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
18
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
20
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
21
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
22
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
23
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
24
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
25
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
26
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
27
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
28
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
29
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
30
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
31
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
32
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
33
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
35
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
36
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
37
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
38
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
39
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
40
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
41
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
42
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
43
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
44
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
45
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
46
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
47
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
48
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
49
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
50
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
51
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
一个可以有其他页面引用的进度条页面:
1
<%
2
String path = request.getContextPath();
3
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
4
%>
5
<script src="<%=basePath%>common/js/upload.js"> </script>
6
<script src="<%=basePath%>dwr/interface/UploadMonitor.js"> </script>
7
<script src="<%=basePath%>dwr/engine.js"> </script>
8
<script src="<%=basePath%>dwr/util.js"> </script>
9
<style type="text/css">
10
body { font: 11px Lucida Grande, Verdana, Arial, Helvetica, sans serif; }
11
#progressBar { padding-top: 5px; }
12
#progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}
13
#progressBarBoxContent { width: 0; height: 20px; border-right: 1px solid #444; background: #9ACB34; }
14
</style>
15![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
16
<div id="progressBar" style="display: none;">
17
<div id="theMeter">
18
<div id="progressBarText"></div>
19
<div id="progressBarBox">
20
<div id="progressBarBoxContent"></div>
21
</div>
22
</div>
23
</div>
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
16
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
17
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
18
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
19
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
20
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
21
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
22
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
23
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
在dwr.xml 中的配置:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
3
"http://getahead.ltd.uk/dwr/dwr20.dtd">
4
<dwr>
5
<allow>
6
<create creator="new" javascript="UploadMonitor" scope="script">
7
<param name="class" value="be.telio.mediastore.ui.upload.UploadMonitor"/>
8
</create>
9
<convert converter="bean" match="be.telio.mediastore.ui.upload.UploadInfo"/>
10
</allow>
11
</dwr>
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
在web.xml中增加如下对DwrServlet的配置:
1
<servlet>
2
<servlet-name>dwr-invoker</servlet-name>
3
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
4
<init-param>
5
<param-name>debug</param-name>
6
<param-value>false</param-value>
7
</init-param>
8
<init-param>
9
<param-name>pollAndCometEnabled</param-name>
10
<param-value>true</param-value>
11
</init-param>
12
<init-param>
13
<param-name>allowGetForSafariButMakeForgeryEasier</param-name>
14
<param-value>true</param-value>
15
</init-param>
16
<load-on-startup>2</load-on-startup>
17
</servlet>
18![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
19
<servlet-mapping>
20
<servlet-name>dwr-invoker</servlet-name>
21
<url-pattern>/dwr/*</url-pattern>
22
</servlet-mapping>
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
16
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
17
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
18
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
19
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
20
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
21
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
22
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
posted on 2007-08-24 11:09 sharewind 阅读(3130) 评论(3) 编辑 收藏 举报