当前位置：首页 > 软件开发 > Web开发 > JavaScript

ExtJS Form表单上传

来源：岁月联盟编辑：exp 时间：2012-08-03

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