EXTJS4.0绘制一个上传的文件的界面

最新推荐文章于 2016-10-18 17:23:32 发布

原创最新推荐文章于 2016-10-18 17:23:32 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Extjs

Jquery/JS/EXTJS 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架实现的文件上传面板组件示例。该组件包含一个文件选择字段和一个上传按钮，通过ExtJS提供的API实现了文件选择与上传的功能。文章提供了完整的JavaScript代码，展示了如何设置文件字段属性及定义上传处理程序。

显示如上：

 <script type="text/javascript">
 Ext.create('Ext.form.Panel', {
    title: '文件上传',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'file',
        fieldLabel: '文件',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: '请选择文件'
    }],

    buttons: [{
        text: '上传',
        handler: function() {
            var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url: '',//具体处理的URL地址/action
                    waitMsg: '上传中..',
                    success: function(fp, o) {
                        Ext.Msg.alert('Success', 'Your file "' + o.result.file + '" has been uploaded.');
                    }
                });
            }
        }
    }]
});
    </script>