如何使用xtype filefield(extjs 4.1.0)限制文件类型?

时间:2012-10-18 06:57:25

标签: extjs extjs4.1

我正在尝试使用extjs 4.1.0实现文件上传功能。而我想限制用户只选择图像文件(jpg,png,gif)。是否有可以应用的过滤器,以便用户只能看到然后选择上述文件的类型?

3 个答案:

答案 0 :(得分:6)

你也可以这样:

    {
        xtype: 'filefield',
        buttonText: '....',
        listeners:{
            afterrender:function(cmp){
              cmp.fileInputEl.set({
                accept:'image/*' // or w/e type
              });
            }
        }
    }

答案 1 :(得分:2)

有关自定义类型的示例,请参阅http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.VTypes VAlidation类型。您也可以使用正则表达式来指定alphaMask。

答案 2 :(得分:0)

{
        xtype: 'fileuploadfield',
        name: 'file',
        fieldLabel: 'Photo',
        labelWidth: 50,
        allowBlank: false,
        buttonText: 'SelectPhoto',
        anchor: '100%',
        reset: function () {
            var me = this,
                clear = me.clearOnSubmit;
            if (me.rendered) {
                me.button.reset(clear);
                me.fileInputEl = me.button.fileInputEl;
                me.fileInputEl.set({
                    accept: 'image/*'
                });
                if (clear) {
                    me.inputEl.dom.value = '';
                }
                me.callParent();
            }},
        listeners:{
            change: 'fileInputChange',
            afterrender:function(cmp){
                cmp.fileInputEl.set({
                    accept:'image/*'
                });
            }
        },
        regex: /(.)+((\.png)|(\.jpg)|(\.jpeg)(\w)?)$/i,
        regexText: 'Only PNG and JPEG image formats are accepted'
    }

正则表达式添加了客户端验证,可以将表单绑定放在您计划执行的任何表单或操作上。