extjs本地预览图片

Ext.onReady(function() {
    Ext.create('Ext.form.Panel', {
        title: '图片预览',
        width: 400,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: '选择图片',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: '浏览...',
            listeners: {
                change: function(field, value) {
                    var fileInput = field.fileInputEl.dom;
                    var file = fileInput.files[0];
                    if (file) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            Ext.getCmp('previewImage').setSrc(e.target.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            }
        }, {
            xtype: 'component',
            itemId: 'previewImage',
            autoEl: {
                tag: 'img',
                src: '',
                style: 'width: 100%; height: auto; display: none;'
            },
            listeners: {
                afterrender: function(cmp) {
                    cmp.getEl().on('load', function() {
                        this.setStyle('display', '');
                    });
                }
            }
        }]
    });
});