[原创] ExtJs + Struts2文件上传

ExtJs表单代码：

Ext.onReady(function() {
	//定义数据集对象
	var mystore = new Ext.data.Store({
		autoLoad : true,
		sortInfo : {
			field : "uploadtime",
			direction : "DESC"
		},
		reader : new Ext.data.JsonReader({
			totalRecords : "results",
			root : "dataList",
			id : 'id',
			fields : [{
				name : 'id'
			}, {
				name : 'realName'
			}, {
				name : 'contentType'
			}, {
				name : 'size'
			}, {
				name : 'uploadtime',
				sortable : true
			}]
		}),
		proxy : new Ext.data.HttpProxy({
			url : 'file_getAll.action',
			method : 'POST'
		})
	})
	//创建工具栏组件
	var toolbar = new Ext.Toolbar([{
		text : '上传文件',
		iconCls : 'add',
		handler : showAdd
	},
			//			{text : '修改信息',iconCls:'option',handler:showModify},
			{
				text : '删除文件',
				iconCls : 'remove',
				handler : showDelete
			}]);
	//创建Grid表格组件
	var cb = new Ext.grid.CheckboxSelectionModel()
	var myGrid = new Ext.grid.GridPanel({
		applyTo : 'grid-div',
		frame : true,
		tbar : toolbar,
		store : mystore,
		stripeRows : true,
		autoScroll : true,
		viewConfig : {
			autoFill : true
		},
		sm : cb,
		columns : [//配置表格列
		new Ext.grid.RowNumberer({
			header : '行号',
			width : 40
		}),		//表格行号组件
				cb, {
					header : "文件编号",
					width : 40,
					dataIndex : 'id',
					sortable : true
				}, {
					header : "文件名",
					width : 100,
					dataIndex : 'realName',
					sortable : true
				}, {
					header : "文件类型",
					width : 50,
					dataIndex : 'contentType',
					sortable : true
				}, {
					header : "文件大小",
					width : 50,
					dataIndex : 'size',
					sortable : true
				}, {
					header : "发布时间",
					width : 80,
					dataIndex : 'uploadtime',
					sortable : true
				}]
	})
	//创建新增或修改通告信息的form表单
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); // 设置缓存
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式

	var myForm = new Ext.form.FormPanel({
		width : 380,
		height : 200,
		frame : true,
		monitorValid:true,
		fileUpload:true, //需上传文件
		url : 'file_upload.action',//请求的url地址
		method:'POST',
		items : [{
			xtype : 'textfield',
			name : 'realname',
			fieldLabel : '文件备注',
			allowBlank:false,
			emptyText:'请输入文件的文件名或其内容关键字……',
			blankText:'文件备注不能为空!'
		}, {
			xtype:'textfield',
			fieldLabel : '选择文件',
			name : 'attachment',
			//关键
			inputType : 'file',
			allowBlank:false,
			blankText:'请选择文件!',
			emptyText:'请选择上传文件'
		}],
		buttons : [{
			formBind:true,
			text : '上传',
			handler:function(){
				myForm.form.submit({
					clientValidation : true,//进行客户端验证
					waitMsg : '正在上传文件,请稍等……',//提示信息
					waitTitle : '提示',//标题
					success : function(form, action) {//加载成功的处理函数
						win.hide();
						myGrid.getStore().reload();
						Ext.Msg.alert('提示', '上传成功');
					},
					failure : function(form, action) {//加载失败的处理函数
						Ext.Msg.alert('提示', '上传失败');
					}
				});
				}
		}, {
			text : '关闭',
			handler:function(){
				win.hide();
			}
		}]
	});
	//创建弹出窗口
	var win = new Ext.Window({
		layout : 'fit',
		width : 380, //380
		closeAction : 'hide',
		height : 200, //280
		resizable : false,
		shadow : true,
		modal : true,
		closable : true,
		bodyStyle : 'padding:5 5 5 5',
		animCollapse : true,
		items : [myForm]
	});
	//显示上传窗口
	function showAdd() {
		myForm.form.reset();
		myForm.isAdd = true;
		win.setTitle("文件上传");
		win.show();
	}
	//显示删除对话框
	function showDelete() {
		var IdList = geIdList();
		var num = IdList.length;
		if (num == 0) {
			return;
		}
		Ext.MessageBox.confirm("提示", "您确定要删除所选文件吗？", function(btnId) {
			if (btnId == 'yes') {
				Delete(IdList);
			}
		})
	}
	//删除信息
	function Delete(IdList) {
		var fileIds = IdList;
		var msgTip = Ext.MessageBox.show({
			title : '提示',
			width : 250,
			msg : '正在删除文件请稍后......'
		});
		Ext.Ajax.request({
			url : 'file_del.action',
			params : {
				fileIds : fileIds
			},
			method : 'POST',
			success : function(response, options) {
				msgTip.hide();
				var result = Ext.util.JSON.decode(response.responseText);
				if (result.success) {
					//服务器端数据成功删除后，同步删除客户端列表中的数据
					for (var i = 0; i < IdList.length; i++) {
						var index = mystore.find('id', IdList[i]);
						if (index != -1) {
							var rec = mystore.getAt(index)
							mystore.remove(rec);
						}
					}
					Ext.Msg.alert('提示', '删除文件成功。');
				} else {
					Ext.Msg.alert('提示', '删除文件失败！');
				}
			},
			failure : function(response, options) {
				msgTip.hide();
				Ext.Msg.alert('提示', '删除文件请求失败！');
			}
		});
	}
	//数据修改后，同步更新信息列表信息
	function updateList(InfoId) {
		var fields = getFormFieldsObj(InfoId);
		var index = mystore.find('id', fields.id);
		if (index != -1) {
			var item = mystore.getAt(index);
			for (var fieldName in fields) {
				item.set(fieldName, fields[fieldName]);
			}
			mystore.commitChanges();
		}
	}

	//取得表单数据
	function getFormFieldsObj(InfoId) {
		var fields = myForm.items;
		var obj = {};
		for (var i = 0; i < fields.length; i++) {
			var item = fields.itemAt(i);
			var value = item.getValue();
			obj[item.name] = value;
		}
		if (Ext.isEmpty(obj['id'])) {
			obj['id'] = InfoId;
		}
		return obj;
	}

	//取得所选信息
	function geIdList() {
		var recs = myGrid.getSelectionModel().getSelections();
		var list = [];
		if (recs.length == 0) {
			Ext.MessageBox.alert('提示', '请选择要进行操作的文件！');
		} else {
			for (var i = 0; i < recs.length; i++) {
				var rec = recs[i];
				list.push(rec.get('id'));
			}
		}
		return list;
	}
});

Acion代码：

package com.jyxx.action;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.json.annotations.JSON;

import com.jyxx.model.Ufile;
import com.jyxx.serviceimpl.fileServiceImpl;
import com.jyxx.utils.GetDate;
import com.jyxx.utils.UploadUtil;
import com.opensymphony.xwork2.ActionSupport;

public class FileAction extends ActionSupport {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private	File attachment;
	private String fileName;
	private String contentType;
	private String size;
	private String realname;
	private String[] fileIds;
	private boolean flag = false;
	private int results;
	private List<Ufile> dataList = new ArrayList<Ufile>();
	private fileServiceImpl impl = new fileServiceImpl();
	
	
	public String getAll(){
		dataList = impl.getAllFiles();
		results = dataList.size();
		return SUCCESS;
	}
	
	@SuppressWarnings("deprecation")
	public String upload() throws Exception {
		String realPath = ServletActionContext.getRequest().getRealPath(
				"/upload");
		Ufile afile = new Ufile();
		String tname = UploadUtil.generateFileName(this.fileName);
		String tdir = realPath + "\\" + tname;
		long s = this.attachment.length();
		if((1024 * 1024 * 1024) <= s){
			size = s /(1024 * 1024 * 1024) + "GB";
		}else if((1024 * 1024) <= s){
			size = s /(1024 * 1024) + "MB";
		}else if(1024 <= s){
			size = s /1024 + "KB";
		}else{
			size = s + "B";
		}
		File targetfile = new File(realPath, tname);
		FileUtils.copyFile(attachment, targetfile);
		afile.setFileName(tdir);
		afile.setContentType(this.contentType);
		afile.setRealName(realname);
		afile.setSize(size);
		GetDate date = new GetDate();
		afile.setUploadtime(date.getDate());
		this.flag = impl.add(afile);
		return NONE;
	}
	
	public String del(){
		for(int i=0;i<fileIds.length;i++){
			int id = Integer.parseInt(fileIds[i]);
			File tem_file = new File(impl.getOne(id).getFileName());
			tem_file.delete();
			flag = impl.del(id);
		}
		return SUCCESS;
	}

	public String getSize() {
		return size;
	}

	public void setSize(String size) {
		this.size = size;
	}

	public String getRealname() {
		return realname;
	}

	public void setRealname(String realname) {
		this.realname = realname;
	}

	public String[] getFileIds() {
		return fileIds;
	}

	public void setFileIds(String[] fileIds) {
		this.fileIds = fileIds;
	}
	
	@JSON(name="success")
	public boolean isFlag() {
		return flag;
	}
	
	public void setFlag(boolean flag) {
		this.flag = flag;
	}

	public int getResults() {
		return results;
	}

	public void setResults(int results) {
		this.results = results;
	}
	
	public String getFileName() {
		return fileName;
	}

	public void setFileName(String fileName) {
		this.fileName = fileName;
	}

	public String getContentType() {
		return contentType;
	}

	public void setContentType(String contentType) {
		this.contentType = contentType;
	}

	public void setAttachment(File attachment) {
		this.attachment = attachment;
	}

	public void setAttachmentFileName(String attachmentFileName) {
		this.setFileName(attachmentFileName);
	}

	public void setAttachmentContentType(String attachmentContentType) {
		this.setContentType(attachmentContentType);
	}

	public List<Ufile> getDataList() {
		return dataList;
	}

	public void setDataList(List<Ufile> dataList) {
		this.dataList = dataList;
	}

	

}

评论

3 楼 guanji1989 2012-09-20  

思路清晰，谢谢！

2 楼 wozhx123 2012-07-31  

报错！  this.el.dom为空或不是对象

1 楼 micropang 2010-01-04  

能不能把ＸＭＬ配置文件也贴上来？？？～～