ExtJS 6-如何在不使用表单的情况下上传文件？

Question

Ext JS提供了fileuploadfield与按钮捆绑在一起的按钮，以浏览本地文件。我只需要使用从本地选择的文件就上传文件，而不是使用提交按钮来触发发布过程。选择文件后找不到触发的事件。

ps实际上，我使用的版本是Ext JS 6，但我认为基于以前版本的解决方案也可以完成。

Answer 1

如果您想提交文件，则需要使用表格。即使您希望按钮位于工具栏中，您也可以将其包含在一个表单中，它仍然看起来像一个普通的工具栏按钮（您需要为此指定适当的 ui 配置）。

例子：

dockedItems: [{
    dock: 'top',
    xtype: 'toolbar',
    items: [{
        xtype: 'form',
        padding: '10 0 0',
        url: 'submit/image',
        items: {
            xtype: 'filefield',
            buttonOnly: true,
            width: 100,
            buttonConfig: {
                text: 'Add logo',
                width: '100%',
                ui: 'default-toolbar-small'
            },
            listeners: {
                change: function (filefield) {
                    filefield.up('form').submit();
                }
            }
        }
    }, {
        text: 'Remove logo'
    }, '-', {
        text: 'Discard changes'
    }]
}]

工作小提琴示例：https : //fiddle.sencha.com/#view/editor&fiddle/1pdk

Answer 2

不需要表格。您可以使用AJAX和FormData。

var file = s.fileInputEl.dom.files[0],
    data = new FormData();

data.append('file', file);

Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){ }
});

在这里在线演示