extjs struts2 文件上传的备忘录

用java做企业开发已经2年多，现正在学习extjs + ssh2开发，把一些备忘写下来，以备以后参考

用extjs 同时上传表单和文件

struts2 中要加入json plugin,用myeclipse开发则不用加入。

extjs文件，里面有一个caption 字段，一个fileuploadfield字段。文件上传成功后，显示上传成功，没有选择文件或上传失败，显示上传失败。另外第二次提交时，必须重新选择上传文件 ，否则文件不会上传（不知何原因）

struts.xml中的配置文件，配置中要注意 param name= contentType , 不配置此项，或配置成“text/json”，在文件上传后，会有一个文件下载的提示。<package name="jfok" extends="json-default"> <action name="fileupload" class="com.jfok.UploadAction"> <interceptor-ref name="fileUploadStack"></interceptor-ref> <result type="json"> <param name="contentType">text/html;charset=utf-8</param> <param name="includeProperties"> success,resultMsg </param> </result> </action> </package>

java action

package com.jfok; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.UnsupportedEncodingException; import com.opensymphony.xwork2.ActionSupport; public class UploadAction extends ActionSupport { private static final long serialVersionUID = 1L; private File upload; //上传的文件，在extjs 中对应 xtype:'fileuploadfield', name:'upload' private String fileName; //上传的文件名 private String uploadContentType; //限制上传的后缀名 private String caption; //form中其他的上传的字段 private Boolean success = true; //json中返回的结果 private String resultMsg = "ok" ; //上传失败后，返回的错误结果 public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; System.out.println("上传到tomcat中的临时文件名：" + upload.getPath()); } public String getUploadFileName() { return fileName; } public void setUploadFileName(String fileName) throws UnsupportedEncodingException { System.out.println("上传的文件名：" +fileName); this.fileName = fileName; } public String getUploadContentType() { return uploadContentType; } public void setUploadContentType(String uploadContentType) { this.uploadContentType = uploadContentType; } public String execute() throws Exception{ try { //此处为最简单的文件拷贝方法 java.io.InputStream is = new FileInputStream(upload); java.io.OutputStream os = new FileOutputStream("d://a//"+fileName); byte buffer[] = new byte[8192]; int count = 0; while ((count = is.read(buffer)) > 0) os.write(buffer, 0, count); os.close(); is.close(); } catch (Exception e) { resultMsg = "上传文件失败，文件太大或没有选择上传的文件 "; System.out.println(resultMsg); success = false; } //此处会根据 success 和 resultMsg 返回 json //{"resultMsg":"ok","success":true} return SUCCESS; } public void setCaption(String caption) { System.out.println("接收到的caption：" + caption ); this.caption = caption; } public String getCaption() { return caption; } public Boolean getSuccess() { return success; } public String getResultMsg() { return resultMsg; } }

  Ext.onReady(function() { var fp = Ext.create( 'Ext.form.Panel', { fileUpload : true, items : [ { xtype: 'textfield', name : 'caption', fieldLabel : '文件备注' }, { xtype : 'fileuploadfield', fieldLabel : '选择上传文件', name : 'upload', allowBlank : true, buttonText : '选择文件' } ], buttons : [ { text : '保存', handler : function() { var form = this.up('form').getForm(); form.submit({ url : 'fileupload.action', waitMsg: '正在上传...', ////{"resultMsg":"ok","success":true} success: function(fp, o) { Ext.Msg.alert('上传成功!',o.result.resultMsg); }, failure : function (fp,o){ Ext.Msg.alert('上传失败!',o.result.resultMsg); } }); } } ] }); var fw = Ext.create('Ext.Window', { layout : 'fit', title : '文件上传', width : 500, defaults : {scope : this}, items : [ fp ] }); fw.show(); }); </script>