在开发Web应用程序时，经常需要上传图片并生成不同尺寸的缩略图以适应不同的显示屏幕。本文将介绍如何在Grails 1.1中使用Dojo插件来实现这一功能。
首先，确保Grails环境已经升级到最新版本，即Grails 1.1。这是为了确保兼容性和使用最新的功能。
最初，尝试使用Grails内置的Prototype库来实现文件上传功能，但遇到了问题。使用<g:submitRemote/>标签并没有达到预期的效果。在提交给Grails项目组后，Graeme礼貌地告诉这是预期的行为，因为Prototype不支持这种操作。他建议尝试使用Dojo。
按照Graeme的建议，安装了Grails Dojo插件。理论上，安装插件后，只需要在GSP页面中添加<g:javascript library="dojo"/>标签，就可以将Ajax调用从Prototype转换为Dojo。但在案例中，这并没有奏效，出现了多个JavaScript错误。
为了解决这个问题，手动将dojo.js文件复制到了预期的位置，并继续进行。但在尝试使用Dojo的文件上传支持时，发现插件中包含的Dojo版本似乎落后了。因此，决定移除Dojo插件，并安装了最新版本（1.2.3），然后开始开发解决方案。
在GSP页面的JavaScript部分，添加必要的Dojo依赖：
<script type="text/javascript" src="${createLinkTo(dir: 'js/dojo', file: 'dojo.js')}" djConfig="parseOnLoad:true, isDebug:true"></script>
<g:javascript>
dojo.require("dojo.io.iframe");
</g:javascript>
使用dojo.io.iframe发送表单：
function submitForm() {
dojo.io.iframe.send({
form: 'uploadProductImageForm',
load: function(data) {
dojo.byId('productImage').innerHTML = data;
}
});
}
创建文件上传表单：
<g:form name="uploadProductImageForm" method="post" action="uploadProductImage" enctype="multipart/form-data">
<input type="hidden" name="id" value="${productInstance?.id}"/>
<input type="file" name="newProductImage"/>
<span class="button">
<input class="add" type="button" name="uploadImage" value="Upload Image" onclick="submitForm()"/>
</span>
</g:form>
def uploadProductImage = {
def f = request.getFile('newProductImage')
if (!f.empty) {
def imagePath = grailsApplication.config.store.productImages.location
def name = "image" + new Date().getTime()
def file = new File("${imagePath}/${originalFilename}")
f.transferTo(file)
// 进行图片处理（缩放等）
...
def writer = new StringWriter()
def xml = new MarkupBuilder(writer)
xml.html {
body {
textarea {
img(src: resource(dir: grailsApplication.config.store.productImages.webPath, file: product.mediumImage.name), width: '250')
}
}
}
render writer.toString()
} else {
flash.message = 'file cannot be empty'
redirect(action: show)
}
}