第一步：需要文件包，其實就是dwr 3.0中例子所需要的包， dwr.jar 、 commons-fileupload-1.2.jar 、 commons-io-1.3.1.jar 。

第二步：編輯web.xml，添加dwr-invoke

Xml代碼

1. <servlet>  
2.     <display-name>DWR Sevlet</display-name>  
3.     <servlet-name>dwr-invoker</servlet-name>  
4.     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
5.     <init-param>  
6.         <description>是否打開調試功能</description>  
7.         <param-name>debug</param-name>  
8.         <param-value>true</param-value>  
9.     </init-param>  
10.     <init-param>  
11.         <description>日志級別有效值為： FATAL, ERROR, WARN (the default), INFO and DEBUG.</description>  
12.         <param-name>logLevel</param-name>  
13.         <param-value>DEBUG</param-value>  
14.     </init-param>  
15.     <init-param>  
16.         <description>是否激活反向Ajax</description>  
17.         <param-name>activeReverseAjaxEnabled</param-name>  
18.         <param-value>true</param-value>  
19.     </init-param>  
20.     <init-param>     
21.          <description>在WEB啟動時是否創建范圍為application的creator</description>     
22.          <param-name>initApplicationScopeCreatorsAtStartup</param-name>     
23.          <param-value>true</param-value>     
24.     </init-param>     
25.     <init-param>  
26.         <description>在WEB啟動時是否創建范圍為application的creator</description>     
27.         <param-name>preferDataUrlSchema</param-name>  
28.         <param-value>false</param-value>  
29.     </init-param>  
30.         <load-on-startup>1</load-on-startup>     
31.        
32. </servlet>  
33. <servlet-mapping>  
34.     <servlet-name>dwr-invoker</servlet-name>  
35.     <url-pattern>/dwr/*</url-pattern>  
36. </servlet-mapping>  

	<servlet>
<display-name>DWR Sevlet</display-name>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<description>是否打開調試功能</description>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<description>日志級別有效值為： FATAL, ERROR, WARN (the default), INFO and DEBUG.</description>
<param-name>logLevel</param-name>
<param-value>DEBUG</param-value>
</init-param>
<init-param>
<description>是否激活反向Ajax</description>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<description>在WEB啟動時是否創建范圍為application的creator</description>
<param-name>initApplicationScopeCreatorsAtStartup</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<description>在WEB啟動時是否創建范圍為application的creator</description>
<param-name>preferDataUrlSchema</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

 第三步：創建上傳類FileUpload.java，編輯代碼，內容如下：

Java代碼

1. package learn.dwr.upload_download;   
2.   
3. import java.awt.Color;   
4. import java.awt.Font;   
5. import java.awt.Graphics2D;   
6. import java.awt.geom.AffineTransform;   
7. import java.awt.image.AffineTransformOp;   
8. import java.awt.image.BufferedImage;   
9. import java.io.File;   
10. import java.io.FileOutputStream;   
11. import java.io.InputStream;   
12. import org.directwebremoting.WebContext;   
13. import org.directwebremoting.WebContextFactory;   
14.   
15. /**  
16.  * title: 文件上傳  
17.  * @author Administrator  
18.  * @時間 2009-11-22:上午11:40:22  
19.  */  
20. public class FileUpload {   
21.   
22.     /**  
23.      * @param uploadImage 圖片文件流  
24.      * @param uploadFile 需要用簡單的文本文件，如：.txt文件，不然上傳會出亂碼  
25.      * @param color  
26.      * @return  
27.      */  
28.     public BufferedImage uploadFiles(BufferedImage uploadImage,   
29.             String uploadFile, String color) {   
30.         // uploadImage = scaleToSize(uploadImage);   
31.         // uploadImage =grafitiTextOnImage(uploadImage, uploadFile, color);   
32.         return uploadImage;   
33.     }   
34.   
35.     /**  
36.      * 文件上傳時使用InputStream類進行接收，在DWR官方例中是使用String類接收簡單內容  
37.      *   
38.      * @param uploadFile  
39.      * @return  
40.      */  
41.     public String uploadFile(InputStream uploadFile, String filename)   
42.             throws Exception {   
43.         WebContext webContext = WebContextFactory.get();   
44.         String realtivepath = webContext.getContextPath() + "/upload/";   
45.         String saveurl = webContext.getHttpServletRequest().getSession()   
46.                 .getServletContext().getRealPath("/upload");   
47.         File file = new File(saveurl + "/" + filename);   
48.         // if (!file.exists()) {   
49.         // file.mkdirs();   
50.         // }   
51.         int available = uploadFile.available();   
52.         byte[] b = new byte[available];   
53.         FileOutputStream foutput = new FileOutputStream(file);   
54.         uploadFile.read(b);   
55.         foutput.write(b);   
56.         foutput.flush();   
57.         foutput.close();   
58.         uploadFile.close();   
59.         return realtivepath + filename;   
60.     }   
61.   
62.     private BufferedImage scaleToSize(BufferedImage uploadImage) {   
63.         AffineTransform atx = new AffineTransform();   
64.         atx   
65.                 .scale(200d / uploadImage.getWidth(), 200d / uploadImage   
66.                         .getHeight());   
67.         AffineTransformOp atfOp = new AffineTransformOp(atx,   
68.                 AffineTransformOp.TYPE_BILINEAR);   
69.         uploadImage = atfOp.filter(uploadImage, null);   
70.         return uploadImage;   
71.     }   
72.   
73.     private BufferedImage grafitiTextOnImage(BufferedImage uploadImage,   
74.             String uploadFile, String color) {   
75.         if (uploadFile.length() < 200) {   
76.             uploadFile += uploadFile + " ";   
77.         }   
78.         Graphics2D g2d = uploadImage.createGraphics();   
79.         for (int row = 0; row < 10; row++) {   
80.             String output = "";   
81.             if (uploadFile.length() > (row + 1) * 20) {   
82.                 output += uploadFile.substring(row * 20, (row + 1) * 20);   
83.             } else {   
84.                 output = uploadFile.substring(row * 20);   
85.             }   
86.             g2d.setFont(new Font("SansSerif", Font.BOLD, 16));   
87.             g2d.setColor(Color.blue);   
88.             g2d.drawString(output, 5, (row + 1) * 20);   
89.         }   
90.         return uploadImage;   
91.     }   
92. }  

package learn.dwr.upload_download;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
/**
* title: 文件上傳
* @author Administrator
* @時間 2009-11-22:上午11:40:22
*/
public class FileUpload {
/**
* @param uploadImage 圖片文件流
* @param uploadFile 需要用簡單的文本文件，如：.txt文件，不然上傳會出亂碼
* @param color
* @return
*/
public BufferedImage uploadFiles(BufferedImage uploadImage,
String uploadFile, String color) {
// uploadImage = scaleToSize(uploadImage);
// uploadImage =grafitiTextOnImage(uploadImage, uploadFile, color);
return uploadImage;
}
/**
* 文件上傳時使用InputStream類進行接收，在DWR官方例中是使用String類接收簡單內容
*
* @param uploadFile
* @return
*/
public String uploadFile(InputStream uploadFile, String filename)
throws Exception {
WebContext webContext = WebContextFactory.get();
String realtivepath = webContext.getContextPath() + "/upload/";
String saveurl = webContext.getHttpServletRequest().getSession()
.getServletContext().getRealPath("/upload");
File file = new File(saveurl + "/" + filename);
// if (!file.exists()) {
// file.mkdirs();
// }
int available = uploadFile.available();
byte[] b = new byte[available];
FileOutputStream foutput = new FileOutputStream(file);
uploadFile.read(b);
foutput.write(b);
foutput.flush();
foutput.close();
uploadFile.close();
return realtivepath + filename;
}
private BufferedImage scaleToSize(BufferedImage uploadImage) {
AffineTransform atx = new AffineTransform();
atx
.scale(200d / uploadImage.getWidth(), 200d / uploadImage
.getHeight());
AffineTransformOp atfOp = new AffineTransformOp(atx,
AffineTransformOp.TYPE_BILINEAR);
uploadImage = atfOp.filter(uploadImage, null);
return uploadImage;
}
private BufferedImage grafitiTextOnImage(BufferedImage uploadImage,
String uploadFile, String color) {
if (uploadFile.length() < 200) {
uploadFile += uploadFile + " ";
}
Graphics2D g2d = uploadImage.createGraphics();
for (int row = 0; row < 10; row++) {
String output = "";
if (uploadFile.length() > (row + 1) * 20) {
output += uploadFile.substring(row * 20, (row + 1) * 20);
} else {
output = uploadFile.substring(row * 20);
}
g2d.setFont(new Font("SansSerif", Font.BOLD, 16));
g2d.setColor(Color.blue);
g2d.drawString(output, 5, (row + 1) * 20);
}
return uploadImage;
}
}

 第四步：添加到dwr.xml

Java代碼

1. <create creator="new">   
2.     <param name="class" value="learn.dwr.upload_download.FileUpload" />   
3. </create>  

	<create creator="new">
<param name="class" value="learn.dwr.upload_download.FileUpload" />
</create>

 第五步：添加前臺html代碼

Html代碼

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5. <title>二進制文件處理，文件上傳</title>  
6. <script type='text/javascript' src='/learnajax/dwr/interface/FileUpload.js'></script>  
7. <script type='text/javascript' src='/learnajax/dwr/engine.js'></script>  
8. <script type='text/javascript' src='/learnajax/dwr/util.js'></script>  
9. <script type='text/javascript' >  
10. function uploadFiles(){   
11.     var uploadImage = dwr.util.getValue("uploadImage");   
12.      FileUpload.uploadFiles(uploadImage, "", "", function(imageURL) {   
13.         alert(imageURL);   
14.         dwr.util.setValue('image', imageURL);   
15.   });   
16.   
17. }   
18. function uploadFile(){   
19.     var uploadFile = dwr.util.getValue("uploadFile");   
20.     //var uploadFile =document.getElementById("uploadFile").value;   
21.     var uploadFileuploadFile_temp = uploadFile.value.replace("\\","/");   
22.     var filenames = uploadFile.value.split("/");   
23.     var filename = filenames[filenames.length-1];   
24.     //var eextension = e[e.length-1];   
25.     FileUpload.uploadFile(uploadFile,filename,function(data){   
26.         var file_a= document.getElementById("file_a");   
27.         file_a.href=data;   
28.         file_a.innerHTML=data;   
29.         document.getElementById("filediv").style.display="";   
30.     });   
31. }   
32.        
33. </script>  
34. </head>  
35.   
36. <body>  
37. <table border="1" cellpadding="3" width="50%">  
38.     <tr>  
39.         <td>Image</td>  
40.         <td><input type="file" id="uploadImage" /></td>  
41.         <td><input type="button" onclick="uploadFiles()" value="upload"/><div id="image.container">&nbsp;</div></td>  
42.     </tr>  
43.     <tr>  
44.         <td>File</td>  
45.         <td><input type="file" id="uploadFile" /></td>  
46.         <td><input type="button" onclick="uploadFile()" value="upload"/><div id="file.container">&nbsp;</div></td>  
47.     </tr>  
48.     <tr>  
49.         <td colspan="3"></td>  
50.     </tr>  
51. </table>  
52. <img id="image" src="javascript:void(0);"/>  
53. <div id="filediv" style="display:none;">  
54. <a href="" id="file_a">上傳的文件</a>  
55. </div>  
56. </body>  
57. </html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二進制文件處理，文件上傳</title>
<script type='text/javascript' src='/learnajax/dwr/interface/FileUpload.js'></script>
<script type='text/javascript' src='/learnajax/dwr/engine.js'></script>
<script type='text/javascript' src='/learnajax/dwr/util.js'></script>
<script type='text/javascript' >
function uploadFiles(){
var uploadImage = dwr.util.getValue("uploadImage");
FileUpload.uploadFiles(uploadImage, "", "", function(imageURL) {
alert(imageURL);
dwr.util.setValue('image', imageURL);
});
}
function uploadFile(){
var uploadFile = dwr.util.getValue("uploadFile");
//var uploadFile =document.getElementById("uploadFile").value;
var uploadFile_temp = uploadFile.value.replace("\\","/");
var filenames = uploadFile.value.split("/");
var filename = filenames[filenames.length-1];
//var extension = e[e.length-1];
FileUpload.uploadFile(uploadFile,filename,function(data){
var file_a= document.getElementById("file_a");
file_a.href=data;
file_a.innerHTML=data;
document.getElementById("filediv").style.display="";
});
}
</script>
</head>
<body>
<table border="1" cellpadding="3" width="50%">
<tr>
<td>Image</td>
<td><input type="file" id="uploadImage" /></td>
<td><input type="button" onclick="uploadFiles()" value="upload"/><div id="image.container">&nbsp;</div></td>
</tr>
<tr>
<td>File</td>
<td><input type="file" id="uploadFile" /></td>
<td><input type="button" onclick="uploadFile()" value="upload"/><div id="file.container">&nbsp;</div></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
<img id="image" src="javascript:void(0);"/>
<div id="filediv" style="display:none;">
<a href="" id="file_a">上傳的文件</a>
</div>
</body>
</html>

添加進度條么，就需要用reverse ajax 進行配合使用了。