使用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>Image</td>
        <td><input type="file" id="image" /></td>
        <td id="image.container">&nbsp;</td>
      </tr>
      <tr>
        <td>File</td>
        <td><input type="file" id="file" /></td>
        <td id="file.container">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3">
          <button onclick="uploadFilesFlat()">Save Flat</button>
          <button onclick="uploadFilesNested()">Save Nested</button>
        </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;
    }
}