简单ExtJs文件上传实现

示图如下：

前台展示代码如下：

var upload=function (callFunc) {
	var i = 0;
	var currentField;
	function getUploadField(callFun) {//增加一行文件框
		var fileName = "文件 " + (++i) + " :  ";
		var uploadFileTf = new Ext.form.TextField({
					xtype : 'textfield',
					columnWidth : .7,
					name : 'file',
					inputType : 'file',
					allowBlank : false,
					blankText : '请选择上传文件',
					anchor : '90%'
				});
		var lbl = new Ext.form.Label({
					text : fileName,
					columnWidth : .15,
					style : 'font-weight:bold;vertical-align: middle'
				});
		var fieldSet = new Ext.form.FieldSet({
					layout : 'column',
					border : false
				});
		fieldSet.add(lbl);
		fieldSet.add(uploadFileTf);
		if (i != 1) {
			var deleteBtn = new Ext.Button({
						text : '删除',
						icon : MCLONIS + "/js/images/delete.gif",
						columnWidth : .15,
						handler : function() {
							fieldSet.destroy();
							upload_win.setHeight(upload_win.getHeight() - 37);
							uploadForm.doLayout(true);
						}
					});
			fieldSet.add(deleteBtn);
		}
		return fieldSet;
	}
	//上传form
	var uploadForm = new Ext.form.FormPanel({
				baseCls : 'x-plain',
				labelWidth : 80,
//				layout:'fit',
				autoHeight:true,
				style:'margin-top:10',
				frame : true,
				disabledClass : "x-item-disabled",
				tbar : [{
							xtype : 'button',
							text : '添加上传',
							labelAlign : 'right',
							icon : KANGSOFT + "/js/images/add_16.gif",
							handler : function() {
								var uf = getUploadField();
								uploadForm.add(uf);
								uploadForm.doLayout(true);
								upload_win.setHeight(upload_win.getHeight()
										+ 47);
							}
						}, {
							xtype : 'label',
							text : '(单个最大允许上传50M)'
						}],
				url : MCLONIS + '/sm/fileUploadAction!fileUpLoad.action',
				fileUpload : true,
				defaultType : 'textfield',
				items : [getUploadField()]
			});
	var upload_win = new Ext.Window({
				title : '文件上传',
				width : 500,
				layout : 'fit',
				plain : true,
				bodyStyle : 'padding:5px;',
				buttonAlign : 'center',
				items : uploadForm,
				resizable : false,
				closeAction : 'close',
				loadMask : true,
				height:160,
				buttons : [{
					text : '开始上传',
					icon : MCLONIS + "/js/images/upload.png",
					handler : function() {
						if (uploadForm.form.isValid()) {
							Ext.MessageBox.show({
										title : 'Please wait',
										msg : '上传中...',
										progressText : '- - - -上传中- - - -',
										width : 300,
										progress : true,
										closable : false,
										animEl : 'loding'
									});
							uploadForm.getForm().submit({
								success : function(form, action) {
									var result = Ext.util.JSON
											.decode(action.response.responseText);
									Ext.Msg.alert('信息提示', result.message);
									var fn = callFunc.createCallback(result);
									fn();
									upload_win.hide();
								},
								failure : function() {
									Ext.Msg.alert('信息提示', '文件上传失败');
									upload_win.show();
								}
							})
						}
					}
				}, {
					text : '关闭',
					icon : MCLONIS + "/js/images/btn-cancel.png",
					handler : function() {
						upload_win.hide();
					}
				}]
			});
		upload_win.show();
}

 

后台部分根据需要实现

注：由于是支持多文件所以后台接收应该写为

private List<File> file;//上传文件
 private List<String> fileFileName;// 使用列表保存多个上传文件的文件名

针对struts2.x