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

来自telio.be的JS：

 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 : [email protected]
 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

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

 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 >

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

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