EXT FileUploadField 选择后点 取消 没有触发Change

是的，这是一个已知的问题。在EXT JS中，当您选择文件并单击“取消”按钮时，不会触发文件上传字段的“change”事件。这是因为“change”事件只在文件字段的值发生更改时触发，而取消不会更改该值。

为了解决这个问题，您可以使用“fileselect”事件。这个事件会在用户选择文件后立即触发，无论他们选择“上传”或“取消”。

例如：

{
  xtype: 'fileuploadfield',
  listeners: {
    fileselect: function(field, value, eOpts) {
      // 在这里执行你的逻辑
    }
  }
}

在这个示例中，当用户选择文件后，“fileselect”事件将被触发，您可以在事件处理程序中执行您需要的任何逻辑。

相关问题

EXT FileUploadField 选择后点 取消 触发事件

EXT FileUploadField 组件的 "取消" 操作可以通过监听 "filecancel" 事件来实现。你可以在 FileUploadField 实例化后，调用它的 on 方法，为 "filecancel" 事件添加一个回调函数。

具体代码如下：

var fileUploadField = Ext.create('Ext.form.field.File', {
    // 配置项
});

fileUploadField.on('filecancel', function(field) {
    // 在这里编写 "取消" 操作后的代码逻辑
});

在上述代码中，当用户在选择完文件后点击 "取消" 操作时，就会触发 "filecancel" 事件，从而执行我们为该事件添加的回调函数。在回调函数中，你可以编写相应的代码逻辑来实现你想要的操作。

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` 元素中，从而实现了预览图片的功能。请注意，这里仅仅是一个基本的示例代码，您可以根据您的具体需求进行修改和优化。