利用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 : plosson@users.sourceforge.net
 9*/
10function refreshProgress()
11{
12    UploadMonitor.getUploadInfo(updateProgress);
13}
14
15function 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
41function 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>