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

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

四、编写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标签如下：