ExtJS Form表单上传

来源：互联网发布：小说网站常用cms 编辑：程序博客网时间：2024/04/30 10:21

一、在页面引入相关的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