如何使用 xtype 文件字段（extjs 4.1.0）限制文件类型？

Posted 2023-02-26

【中文标题】如何使用 xtype 文件字段（extjs 4.1.0）限制文件类型？

【英文标题】：How to restrict file type using xtype filefield(extjs 4.1.0)?

【发布时间】：2012-10-18 06:57:25

【问题描述】：

我正在尝试使用 extjs 4.1.0 实现文件上传功能。而我想限制用户只选择图像文件（jpg、png、gif）。是否有任何过滤器可以应用，以便用户只能看到并选择上述文件的类型？

【参考方案1】：

你也可以这样：

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

【讨论】：

您在看哪个版本的文档？检查 ExtJS4.2 文档后，我在文件字段组件中看到 afterrender 事件：docs.sencha.com/extjs/4.2.2/#!/api/… 该方法自 ExtJS 3.4.0 起存在。

我错过了（我在 sencha 的文档中搜索而不是 Ext），这是我红色的文档 docs.sencha.com/touch/2.3.1/#!/api/Ext.field.File

【参考方案2】：

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

【参考方案3】：

        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'
    

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