我只是在使用 Grails 进行照片上传,当我使用 g:form 一切正常时,文件被解析、转换并放入控制器中的会话中,作为响应,我渲染了一个包含照片和一些隐藏输入的模板,因为下一步是裁剪图像并发送回新坐标。
这是“上传表单”代码:
<g:form name="uploadForm" onSuccess="sucess()" enctype="multipart/form-data" url="[controller:ProfileEditor, action:"preview${type.capitalize()}", params:[profilId:profilId]]" >
<input type="file" name="${type}" />
<input type="submit" value="<g:message code="button.${type}.upload" />">
</g:form>
<div id="uploadPreview"></div>
<script type="text/javascript">
function success() {
$('#uploadPreview').html(data);
alert("upload complete");
}
</script>
我希望将响应插入
('#uploadPreview')
而不是单击提交按钮,浏览器导航到 url-attr 中指定的 url,其中包含带有图像的模板
问题是当我使用 g:formRemote 时没有发布数据,就像 enctype="multipart/form-data" 被完全忽略一样,afaik 通过 ajax 上传文件有点棘手,我们已经用 jquery 解决了这个问题form.js 和它的 ajaxForm,它不需要 formRemote,并且可以在同一页面上上传照片,但我们不能再使用它,它会在 chrome 中随机导致严重的会话问题和脚本错误/ium 和歌剧,所以我必须找到另一种方式
这是简单的 form.js 方式,在上面的代码中 sucessFunction 是:
- var options = {
- beforeSubmit : function() {
- uploadPreview.empty();
},
- complete : function(xhr) {
- percent.empty();
- uploadPreview.html(xhr.responseText);
- }
- };
- $('#uploadForm').ajaxForm(options);
我想知道是否有一个简单的解决方案来使用 formRemote 将文件作为 formData 发布并更新 div,因为在包装表单内进行裁剪的 ajax-foto 上传是常见的事情?
提前致谢