使用DWR3.0进行文件的上传
Dwr对于二进制文件的处理主要分为文件的Upload和文件的Download两种处理。
下面详细介绍下File Upload.文件的上传非常简单，下面以image的处理为例来详细讲解下：
1.效果图：
1.1点击Image后边的按钮，选择如下的图片：
1.2点击File后边的按钮，选择对应的文本，文本里的内容如下：
使用DWR测试图片1.3输入颜色值
1.4最后点击Upload,效果如上图所示。
2.使用DWR进行文件上传的原理
DWR使用“file”转换器，在浏览器中自动的把files转换成org.directwebremoting.export.FileUpload的实例。当我们点击页面上的upload按钮的时候，upload按钮调用uploadFiles这个js函数，在这个函数里，通过dwr.util.getValue很容易获取输入框的值，并把这些值传递给后台的DWR。
示例代码如下：
function uploadFiles() {
var image = dwr.util.getValue('uploadImage');
var file = dwr.util.getValue('uploadFile');
var color = dwr.util.getValue('color');
FileUploader.uploadFiles(image, file, color, function(data) {
dwr.util.setValue('image', data);
});
}
dwr.util.getValue() 是一个非常实用的工具，用来获取任何对象的值，比如上边代码里的file对象。
在后台服务器端，DWR 访问java中的FileUploader.uploadFiles()这个方法，代码段如下：
BufferedImage uploadFiles(BufferedImage uploadImage, String uploadFile, String color)
主要通过缩放和在图片上写文本的方式来转换图片：
uploadImage = scaleToSize(uploadImage);
uploadImage = grafitiTextOnImage(uploadImage, uploadFile, color);
return uploadImage;
基本上也就这些了。查看源码，里边关于如何改变图片大小和向图片上写文本的这些内容，则与怎么使用DWR没有多大关系了（主要是图像处理的知识），此时我们可以先忽略这部分。Java返回的image对象，通过DWR的转换器，然后传递给页面上的Javascript的回调函数，并把图片显示在页面上：
dwr.util.setValue('image', data);
非常庆幸的是，源码里的99%的地方都是图像处理的，DWR相关的极其简单。
3.源码
3.1.HTML source:
<table>
<tr>
<td>Imagetd>
<td><input type="file" id="image" />td>
<td id="image.container"> td>
tr>
<tr>
<td>Filetd>
<td><input type="file" id="file" />td>
<td id="file.container"> td>
tr>
<tr>
<td colspan="3">
<button onclick="uploadFilesFlat()">Save Flatbutton>
<button onclick="uploadFilesNested()">Save Nestedbutton>
td>
tr>
table>
3.2Javascript source:
function uploadFiles() {
var image = dwr.util.getValue('uploadImage');
var file = dwr.util.getValue('uploadFile');
var color = dwr.util.getValue('color');
FileUploader.uploadFiles(image, file, color, function(data) {
dwr.util.setValue('image', data);
});
}
3.3Java source:
/**
* A demonstration of uploading files and images
* @author Joe Walker [joe at getahead dot ltd dot uk]
*/
public class FileUploader
{
/**
* Take 2 uploaded files and return an image based on them
* @param uploadImage The uploaded image
* @param uploadFile The uploaded file
* @param color The selected color
* @return A mangled image based on the 2 uploaded files
*/
public BufferedImage uploadFiles(BufferedImage uploadImage, String uploadFile, String color)
{
uploadImage = scaleToSize(uploadImage);
uploadImage = grafitiTextOnImage(uploadImage, uploadFile, color);
return uploadImage;
}
/**
* Voodoo to scale the image to 200x200
* @param uploadImage The image to work on
* @return The altered image
*/
private BufferedImage scaleToSize(BufferedImage uploadImage)
{
AffineTransform atx = new AffineTransform();
atx.scale(200d / uploadImage.getWidth(), 200d / uploadImage.getHeight());
AffineTransformOp afop = new AffineTransformOp(atx, AffineTransformOp.TYPE_BILINEAR);
uploadImage = afop.filter(uploadImage, null);
return uploadImage;
}
/**
* And scrawl the text on the image in 10 rows of 20 chars
* @param uploadImage The image to work on
* @param uploadFile The text to write on the image
* @param color The selected color
* @return The altered image
*/
private BufferedImage grafitiTextOnImage(BufferedImage uploadImage, String uploadFile, String color)
{
while (uploadFile.length() < 200)
{
uploadFile += uploadFile + " ";
}
Graphics2D g2d = uploadImage.createGraphics();
for (int row = 0; row < 10; row++)
{
String output = null;
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(ColorUtil.decodeHtmlColorString(color));
g2d.drawString(output, 5, (row + 1) * 20);
}
return uploadImage;
}
}