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”%>


服务器处理结果


<s:property value=”result”/>

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


arthinking wechat
欢迎关注itzhai公众号