一、在页面引入相关的JS文件
Ext.ux.form.FileUploadField是ExtJS的文件上传组件,如果要使用它,可以从ExtJS的安装目录下的/examples/ux目录拷贝到项目中,然后在head里面引入js文件,比如放在网站的script目录下,可以这样写:
<script type="text/javascript"src="../ext-3.4.0/ux/fileuploadfield/FileUploadField.js"></script>
当然,其他和ExtJS相关的JS文件和CSS文件照常引入。
<link rel="stylesheet" type="text/css" href="../ext-3.4.0/ux/fileuploadfield/css/fileuploadfield.css">
当然,其他和ExtJS相关的JS文件和CSS文件照常引入。
以下是upload.js
Ext.onReady(function(){
var fp = new Ext.FormPanel(
{
renderTo : 'd',
fileUpload : true,
width: 500,
border : true,
labelWidth :70,
title: '上传文件',
frame:true,
bodyStyle : 'padding: 10px;',
defaults:{width:200},
items :[{
xtype: 'textfield',
fieldLabel: '文件名称',
name:'name'
},{
//第一个上传控件
xtype: 'fileuploadfield',
buttonText : '文件1...',
name : 'upload1',
emptyText: '请您选择文件',
fieldLabel: 'Photo1',
name: 'path'
// buttonCfg: {
// text: '浏览'
// iconCls: 'upload-icon' //按钮图标
// }
},
//第二个上传控件
new Ext.ux.form.FileUploadField( //这里和上面的xtype是一样的意思
{
buttonText : '文件2...',
name : 'upload2',
fieldLabel:'Photo2'
}),
//第三个上传控件
new Ext.ux.form.FileUploadField(
{
buttonText : '文件3...',
name : 'upload3',
fieldLabel:'Photo3'
})],
buttons: [{
text: '保存',
handler: function(){
alert(fp.getForm().findField('path').getValue());
if(fp.getForm().isValid()){
fp.getForm().submit({
url: '/MyWeb/servlet/MyServlet', //后台处理页面(可以是php,asp,aspx,jsp等等)
waitMsg: '正在上传...',
success: function(fp, o){
Ext.MessageBox.alert('恭喜您', '上传 "'+o.result.file+'" 成功!');
}
});
}
}
},{
text: '重置',
handler: function(){
fp.getForm().reset();
}
}]
});
});
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../ext-3.4.0/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext-3.4.0/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-3.4.0/ux/fileuploadfield/css/fileuploadfield.css">
<script type="text/javascript" src="../ext-3.4.0/ux/fileuploadfield/FileUploadField.js"></script>
<script type="text/javascript" src="upload.js"></script>
</head>
<body>
<div id="d"></div>
</body>
</html>
要导FileUploadField.js才能运行 更多请查看: http://www.itzhai.com/extjss-fileuploadfield-multiple-files-upload-component.html