EXT3整合struts2上传，中间解决了一些问题

extjs3文件上传需要引入FileUploadField.js和fileuploadfield.css这两个扩展文件（这两个文件可以在extjs3包中的examples/form下找到）

1.引入FileUploadField.js，源码如下：

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.form');

/**
* @class Ext.ux.form.FileUploadField
* @extends Ext.form.TextField
* Creates a file upload field.
* @xtype fileuploadfield
*/
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
/**
* @cfg {String} buttonText The button text to display on the upload button (defaults to
* 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
* value will be used instead if available.
*/
buttonText: 'Browse...',
/**
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
* text field (defaults to false). If true, all inherited TextField members will still be available.
*/
buttonOnly: false,
/**
* @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
* (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
*/
buttonOffset: 3,
/**
* @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
*/

// private
readOnly: true,

/**
* @hide
* @method autoSize
*/
autoSize: Ext.emptyFn,

// private
initComponent: function(){
Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

this.addEvents(
/**
* @event fileselected
* Fires when the underlying file input field's value has changed from the user
* selecting a new file from the system file selection dialog.
* @param {Ext.ux.form.FileUploadField} this
* @param {String} value The file value returned by the underlying file input field
*/
'fileselected'
);
},

// private
onRender : function(ct, position){
Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');
this.createFileInput();

var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText
});
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));

if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}

this.bindListeners();
this.resizeEl = this.positionEl = this.wrap;
},

bindListeners: function(){
this.fileInput.on({
scope: this,
mouseenter: function() {
this.button.addClass(['x-btn-over','x-btn-focus'])
},
mouseleave: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
mousedown: function(){
this.button.addClass('x-btn-click')
},
mouseup: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
change: function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}
});
},

createFileInput : function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});
},

reset : function(){
this.fileInput.remove();
this.createFileInput();
this.bindListeners();
Ext.ux.form.FileUploadField.superclass.reset.call(this);
},

// private
getFileInputId: function(){
return this.id + '-file';
},

// private
onResize : function(w, h){
Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

this.wrap.setWidth(w);

if(!this.buttonOnly){
var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
this.el.setWidth(w);
}
},

// private
onDestroy: function(){
Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
Ext.destroy(this.fileInput, this.button, this.wrap);
},

onDisable: function(){
Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
this.doDisable(true);
},

onEnable: function(){
Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
this.doDisable(false);

},

// private
doDisable: function(disabled){
this.fileInput.dom.disabled = disabled;
this.button.setDisabled(disabled);
},

// private
preFocus : Ext.emptyFn,

// private
alignErrorIcon : function(){
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
}

});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;

2.引入fileuploadfield.css，代码如下：

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
/*
* FileUploadField component styles
*/

/*图片自己去ext包中寻找，然后按照自己的目录放置*/
.upload-icon {
background: url('../images/image_add.png') no-repeat 0 0 !important;
}
.x-form-file-wrap {
position: relative;
height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
right: 0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
right: 0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
position: absolute;
left: 0;
z-index: 3;
color: #777;
}

3.JSP引入以上两个文件

/*文件路径自己设置*/

<script type='text/javascript' src='<%=request.getContextPath()%>/ext/extjs/ux/FileUploadField.js'></script>
<link rel="stylesheet" type="text/css" href='<%=request.getContextPath()%>/ext/extjs/ux/css/fileuploadfield.css'/>

4.js代码

function addAppInfo(){
var upload = new Ext.Window({
id:'addAppInfo',
title:'添加数据',
400,
height:250,
plain:true,
modal:true,
border:false,
frame:true,
layout:'border',
items:new Ext.FormPanel({
id:'addAppInfoForm',
fileUpload: true,
region:'center',
frame: true,
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 70,
defaults:{
xtype:'textfield',
250,
msgTarget: 'side'
},
items: [{
fieldLabel: '应用名称',
id:'addAppInfo_appTitle',
allowBlank:false,
maxLength:32
},{
fieldLabel: '应用标识',
id:'addAppInfo_appTag',
allowBlank:false,
maxLength:32
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: '选择图片...',
fieldLabel: '图片上传',
name: 'upload',//与后台文件流一致
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
},{
fieldLabel: '关键词',
id:'addAppInfo_appKey',
allowBlank:false,
maxLength:32
},{
fieldLabel: '下载地址',
id:'addAppInfo_appUrl',
allowBlank:false,
maxLength:32
}],
buttons: [{
text: '确定',
handler: function(){
var oForm = Ext.getCmp("addAppInfoForm");
if(oForm.getForm().isValid()){
oForm.getForm().submit({//只能用form提交，不能用ajax
url:global_path+'/dangzheng/addAppInfo.htm',
params:{
'system':system,
'browser':browser,
'appInfo.appTitle':Ext.getCmp("addAppInfo_appTitle").getValue(),
'appInfo.appTag':Ext.getCmp("addAppInfo_appTag").getValue(),
'appInfo.appKey':Ext.getCmp("addAppInfo_appKey").getValue(),
'appInfo.appUrl':Ext.getCmp("addAppInfo_appUrl").getValue(),
'fileName':Ext.getCmp("form-file").getValue() //获取文件路径
},
method:'post',
success:function(response,options){
Ext.Msg.show({
title:'提示',
msg: '添加成功!',
buttons: Ext.Msg.OK,
minWidth:200,
closable:false,
icon: Ext.MessageBox.INFO
});
Ext.getCmp("appInfo_grid").getStore().reload();
Ext.getCmp('addAppInfo').close();//©此语句不能放在®位置，否则会导致上传时获取不到文件流
},
failure:failureHandle
});

//Ext.getCmp('addAppInfo').close();//®此次不能放该语句

}
}
},{
text: '取消',
handler:function(){
Ext.getCmp('addAppInfo').close();
}
}]
})
}).show();
Ext.getCmp("addAppInfo").show();
}

以上是我的代码，

问题一：由于®位置放置了关闭窗口语句，导致文件上传时获取不到文件流，后来放在©位置终于得到了流，具体什么原因也不清楚。

问题二：上传成功后，返回成功不正确，然后查问题，发现返回的是数据是application/json格式，网上查了很多，让后台设置response.setContentType("text/html; charset=utf-8");

发现并没有效果，最后选择在struts配置文件配置<param name="contentType">text/html</param>，返回{"success":true}成功

• • 后台代码就不发了，只要能获取到流，相信大家不会有问题。

    ---