How to restrict file type using xtype filefield(extjs 4.1.0)?

问题

I am trying to implement file upload feature using extjs 4.1.0. Whereas I want to restrict users to select only image files(jpg,png,gif). Is there any filter which can be applied so that users will only be able to see and then select the types of the files mentioned above?

回答1:

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.VTypes VAlidation types for an example of a custom type. You could use a regexp to specify alphaMask as well.

回答2:

You could stuff like this as well :

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

回答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'
    }

regex adds client side validation, to which a form bind can be put on whatever form or action you are planning on doing.

来源：https://stackoverflow.com/questions/12948793/how-to-restrict-file-type-using-xtype-filefieldextjs-4-1-0