Ajax file upload 文件上传有许多的插件支持,且都有相应的 PHP 服务端示范,可是在将代码应用到 Struts2 上时却总是不尽如意。网上也只找到一些不完全的解决方案。这里给出我的解决,因为已经有个样子了。在项目的后期再进行完善吧。
Struts2 上实现 Ajax file upload 的困难:
1. Struts2 对文件上传是通过 file upload 拦截器实现的,具体引入方法见
这里。然而 File Upload 拦截器似乎对于 XHR 过来的文件上传请求无法响应,具体原因未去探究。也希望知道的人给个提示,谢谢。
2. 实现无页面刷新的文件上传通常是通过隐藏 iFrame 实现的。即在有文件上传的 form 中添加一个 target 属性,并指向一个隐藏 iFrame。这样可以实现页面无刷新,form 提交后的返回信息会填入到指定的 iframe 中。然而问题在于 iframe 只接收 contentType 为 HTML 和 XML 响应,对于其他类型的响应会以浏览器文件下载的形式提示下载。
为解决以上问题,思路如下:
1. 先编写正常的文件上传 form,而不用 XHR。并添加一个隐藏 iframe。将 form 的 target 指向隐藏 iframe。
2. 配置 action 的返回值类型为 text/html,用 包装 JSON 数据。在接收数据时再对其进行解析转换为 JSON
具体实现:
使用到的工具包:
jquery.form.js
Struts 2 的 JSON 插件
在实现文件上传的过程中无意间看到 jquery.form.js 上有对文件上传中遇到的问题2进行了
描述,也看到了它给出的解决方案,于是决定用它来简化开发。而 Struts2 的 JSON 插件本来是为了实现 JSON 传输的,发现它可以为 JSON 数据自动添加包装,且
描述中明确表明是为了实现文件上传的。呵呵,有意思的巧合。
编写 JSP:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<s:form action="doUpload" method="post" enctype="multipart/form-data">
<s:file name="upload" label="File"/>
<s:submit/>
</s:form>
<script type="text/javascript">
$('form').ajaxForm({
dataType: 'json',
success: function(data) { /* do something you want */}
});
</script>
编写 Action:
注意
getter 和 setter 的设置问题。因为 JSON 插件会将所有的 getter 方法转换为 JSON 输出,所以应尽量避免不必要的 getter 方法的存在。尤其是类似 getFile():InputStream 的方法,因为这样会把整个文件变为一堆乱码输出到页面,页面运行速度极慢。
package cream;
import java.io.File;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private File file;
private String contentType;
private String filename;
private String message;
public void setUpload(File file) {
this.file = file;
}
public void setUploadContentType(String contentType) {
this.contentType = contentType;
}
public void setUploadFileName(String filename) {
this.filename = filename;
}
public String execute() {
//...
return SUCCESS;
}
// getter with necessary
public String getMessage() {
return this.message;
}
}
配置 XML:
<action name="doUpload" class="cream.UploadAction">
<result type="json">
<param name="wrapPrefix"><![CDATA[<textarea>]]></param>
<param name="wrapSuffix"><![CDATA[</textarea>]]></param>
<param name="contentType">text/html</param>
</result>
</action>
这里对于结果进行了特殊处理,将结果的 contentType 设置成了 "text/html" 以便 iframe 可以正常接收。而将 JSON 封装在了 中,便于 JS 在前端进行处理。
这样对于 Struts2 的文件上传就改造完成了。现在可以实现无刷新页面上传啦
分享到:
相关推荐
'fileDataName' : 'file' 因为在页面上没有加上这个属性,导致在aciton里边接收不到file文件,页面会显示:HTTP ERROR! <result name="upload" type="dispatcher"> /index.jsp return "upload"; 开始我这里...
最近想在Struts2中实现批量上传(使用html的file标签时,一次只能选一个文件,我是想一下可以选多个文件),结果找了半天,大都是swf+ajax的,用起来太复杂了,代码也很繁多,实在没耐心了。 就想起FlashFileUpload...
作者处处从实战出发,在丰富的示例中直观地探讨了许多实用的技术,如数据类型转换、文件上传和下载、提高Struts 2应用的安全性、调试与性能分析、FreeMarker、Velocity、Ajax,等等。跟随作者一道深入Struts 2,聆听...
本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文。 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式...
知识点: ready, tag, action, internationalization, converter, validation, interceptor,ioc,file upload, crud, ognl,struts2&ajax struts1&struts2
书中介绍了如何利用Struts 2 来解决Web 应用开发中的常见问题,同时还深入浅出地探讨了许多能帮助程序员编写Struts 2 应用程序的技巧,如管理页面导航活动、输入验证、国际化和本地化、对Ajax 的支持,等等。...
struts2+jquery+ajaxfileupload 需要正确配置struts2文件struts-xml文件中需要配置extends="json-default"。如果返回json结果需要在前台js中解析json数据,要用jquery的jQuery.parseJSON(json)。
服务器端采用struts2来处理文件上传。 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文件上传的Action package com.ajaxfile.action; import java.io....
后端:java (struts框架相关) 碰到问题: 后台coder给我提供一个接口./file/uploader.do?upFile=?,让我上传文件对应upFile这个参数,前端使用的是webuploader这个上传插件,并不知道这个东西怎么自定义参数。...