Dwr对于二进制文件的处理主要分为文件的Upload和文件的Download两种处理。
下面详细介绍下File Upload.文件的上传非常简单,下面以image的处理为例来详细讲解下:
1.1点击Image后边的按钮,选择如下的图片:
1.2点击File后边的按钮,选择对应的文本,文本里的内容如下:
使用DWR测试图片
1.3输入颜色值
1.4最后点击Upload,效果如上图所示。
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.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;
}
}