利用DWR实现文件上传进度条

Posted on 2007-02-07 14:28 lixw 阅读(3601) 评论(1) 编辑收藏

来自telio.be的JS：

/* 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

function updateProgress(uploadInfo)
16

{
17

if (uploadInfo.inProgress)
18

{
19

document.getElementById('uploadbutton').disabled = true;
20

document.getElementById('file1').disabled = true;
21

var fileIndex = uploadInfo.fileIndex;
23

var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
25

document.getElementById('progressBarText').innerHTML = 'upload in progress: ' + progressPercent + '%';
27

document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
29

window.setTimeout('refreshProgress()', 1000);
31

}
32

else
33

{
34

document.getElementById('uploadbutton').disabled = false;
35

document.getElementById('file1').disabled = false;
36

}
37

return true;
39

}
40

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

// wait a little while to make sure the upload has started ..
48

window.setTimeout("refreshProgress()", 1500);
49

return true;
50

}
51

一个可以有其他页面引用的进度条页面：

<%
2

String path = request.getContextPath();
3

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
4

%>
5

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

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

在dwr.xml 中的配置：

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

在web.xml中增加如下对DwrServlet的配置：

<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

<servlet-mapping>
20

<servlet-name>dwr-invoker</servlet-name>
21

<url-pattern>/dwr/*</url-pattern>
22

</servlet-mapping>

# re: 利用DWR实现文件上传进度条 回复 更多评论

2009-06-16 17:36 by shenw

很不错

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

Thinking