日期:2014-05-16  浏览次数:20726 次

Struts2 Ajax file upload 实现
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 的文件上传就改造完成了。现在可以实现无刷新页面上传啦