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>

 

 

转载于:https://my.oschina.net/zipu888/blog/549820