ext FileUploadField 选择文件后触发事件 预览图片

在Ext JS中，可以通过监听 `change` 事件来触发文件选择后的操作，然后通过 `FileReader` 对象读取文件并使用 `Image` 对象来预览图片。

以下是一个基本的示例代码：

Ext.create('Ext.form.Panel', {
    title: 'File Upload Example',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...',
        listeners: {
            change: function(field, value) {
                var file = field.fileInputEl.dom.files[0];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var img = Ext.DomHelper.append(Ext.getBody(), {
                        tag: 'img',
                        src: e.target.result,
                        style: 'height:150px;margin-top:10px;'
                    });
                };

                reader.readAsDataURL(file);
            }
        }
    }],
    buttons: [{
        text: 'Upload',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'photo-upload.php',
                    waitMsg: 'Uploading your photo...',
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }]
});

在上面的示例中，我们使用 `FileReader` 对象读取文件，并将读取的结果作为 `src` 属性设置到 `img` 元素中，从而实现了预览图片的功能。请注意，这里仅仅是一个基本的示例代码，您可以根据您的具体需求进行修改和优化。