利用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
15
function updateProgress(uploadInfo)
16
{
17
if (uploadInfo.inProgress)
18
{
19
document.getElementById('uploadbutton').disabled = true;
20
document.getElementById('file1').disabled = true;
21
22
var fileIndex = uploadInfo.fileIndex;
23
24
var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
25
26
document.getElementById('progressBarText').innerHTML = 'upload in progress: ' + progressPercent + '%';
27
28
document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
29
30
window.setTimeout('refreshProgress()', 1000);
31
}
32
else
33
{
34
document.getElementById('uploadbutton').disabled = false;
35
document.getElementById('file1').disabled = false;
36
}
37
38
return true;
39
}
40
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
47
// wait a little while to make sure the upload has started ..
48
window.setTimeout("refreshProgress()", 1500);
49
return true;
50
}
51

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

一个可以有其他页面引用的进度条页面:
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
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>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

在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>

2

3

4

5

6

7

8

9

10

11

在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
19
<servlet-mapping>
20
<servlet-name>dwr-invoker</servlet-name>
21
<url-pattern>/dwr/*</url-pattern>
22
</servlet-mapping>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22
