extjs filefield java_ExtJS的FileUploadField组件上传多个文件

一、在页面引入相关的JS文件

Ext.ux.form.FileUploadField是ExtJS的文件上传组件，如果要使用它，可以从ExtJS的安装目录下的/examples/ux目录拷贝到项目中，然后在head里面引入js文件，比如放在网站的script目录下，可以这样写：

当然，其他和ExtJS相关的JS文件和CSS文件照常引入。

二、编写服务器端上传处理文件

准备服务器端的上传处理文件，这里的后台处理文件为uploadFilesAction.java，其实现可以参看这篇文章： Struts2的一个和多个文件上传的实现

该文件在struts.xml文件中的配置如下：

/WEB-INF/result.jsp

D:\\UploadFiles\\

三、服务器端返回result.jsp

服务器处理结果

四、编写JS代码

接下来就是在JSP页面中编写ExtJS的界面了，这里使用了Ext.ux.form.FileUploadField组件，相关的JS代码如下：

Ext.onReady( function()

{

var uploadFormPanel = new Ext.FormPanel(

{

renderTo : 'upload-div',

fileUpload : true,

border : true,

labelWidth : .5,

bodyStyle : 'padding: 10px;',

items :

[

//第一个上传控件

new Ext.ux.form.FileUploadField(

{

buttonText : '文件1...',

name : 'upload',

width : 200

}), new Ext.ux.form.FileUploadField(

{

//第二个上传控件

buttonText : '文件2...',

name : 'upload',

width : 200

}) ],

buttons :

[{

//上传提交按钮

text : '本地上传',

handler : function()

{

if (uploadFormPanel.getForm().isValid())

{

uploadFormPanel.getForm().submit(

{

url : 'uploadMoreFiles.action',

waitMsg : '图片上传中...',

success : function(form, action)

{

alert(action.result.msg);

}

});

}

}

}]

});

});

需要的html标签如下：