＜!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr//dwr20.dtd"＞
＜dwr＞
＜allow＞
＜create creator="new" javascript="FileUploadProgressListener"＞
＜param name="class"
value="uk.ac.dl.esc.gtg.myportlets.fileupload.FileUploadProgressListener"/＞
＜include method="getFileUploadStatus"/＞
＜/create＞
＜/allow＞
＜/dwr＞

　　清单 5 所示的 JSP 文件 fileupload-view.jsp 展示了 DWR 如何有助于从服务器端检索文件上载过程。一旦选中了文件并单击了 Upload 按钮（参看 图 1），fileupload_ajax_query_upload_status() 方法会被即刻调用。此方法之后会以异步模式调用 FileUploadProgressListener 的 getFileUploadStatus() 方法（参见 清单 2）。DWR 的妙处就在于此：客户机可以和服务器端的 Java 对象交互。一旦收到响应，fileupload_ajax_show_upload_status() 方法会被调用以刷新此过程。如果文件上载没有完成，更新后的过程就会在两秒种之后检索。

　　清单 5. 文件上载 portlet JSP 文件 —— fileupload-view.jsp

＜%@ page session="false" %＞
＜%@ page contentType="text/html" %＞
＜%@ page import="javax.portlet.PortletURL" %＞
＜%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %＞
＜portlet:defineObjects/＞
＜script type="text/javascript"
src='＜%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/interface/FileUploadProgressListener.js") %＞'＞
＜/script＞
＜script type="text/javascript"
src='＜%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/engine.js") %＞'＞
＜/script＞
＜script type="text/javascript"
src='＜%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/util.js") %＞'＞
＜/script＞
＜script type="text/javascript"＞
function fileupload_ajax_query_upload_status() {
FileUploadProgressListener.getFileUploadStatus
(fileupload_ajax_show_upload_status);
return true;
}
function fileupload_ajax_show_upload_status(status) {
if (status == "100")
document.getElementById("fileupload_progress").innerHTML
="File successfully uploaded";
else {
document.getElementById("progressBar").style.display = "block";
document.getElementById("fileupload_progress").innerHTML=
"Uploading file: " + status
+ "% completed, please wait...";
document.getElementById("progressBarBoxContent").style.width =
parseInt(status * 3.5) + "px";
setTimeout(fileupload_ajax_query_upload_status, 2000);
}
return true;
}
＜/script＞
＜style type="text/css"＞
#progressBar {padding-top: 5px; }
#progressBarBox {width: 350px; height: 20px; border: 1px insert; background: #eee; }
#progressBarBoxContent {width: 0; height: 20px; border-right: 1px solid #444;
background: #9ACB34; }
＜/style＞
＜h4＞File Upload＜/h4＞
＜!-- the upload form --＞
＜% PortletURL pUrl = renderResponse.createActionURL();
%＞
＜form action="＜%= pUrl.toString() %＞"
enctype="multipart/form-data" method="post"
onsubmit="setTimeout('fileupload_ajax_query_upload_status()', 1000)"＞
＜input type="file" name="fileupload_upload" value="Upload File"＞
＜input type="submit" value="Upload"＞
＜/form＞
＜%-- file upload progress bar --%＞
＜div id="fileupload_progress"＞＜/div＞
＜div id="progressBar" style="display: none; "＞
＜div id="progressBarBoxContent"＞＜/div＞
＜/div＞

(编辑:aniston)