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

Question

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

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

Answer 1

表格不是必需的。您可以使用 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){ }
});

在线演示here

Answer 2

如果您想提交文件，您需要使用表单。即使您希望该按钮位于工具栏中，您也可以将其包含在一个表单中，它仍然看起来像一个普通的工具栏按钮（您需要为此指定正确的 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 3

虽然我同意scebotari's answer，但在您的情况下，在工具栏中嵌入表单可能是最简单的解决方案，为了回答原始问题：

如果您真的不能或不想使用表单并且您不受浏览器支持的限制，请查看FileReader。

这个想法是在客户端（JavaScript）读取文件内容，然后使用常规 AJAX 请求发送数据。

您的代码可能如下所示：

function (fileField) {
    var file = fileField.fileInputEl.dom.files[0],
        reader;

    if (file === undefined || !(file instanceof File)) {
        return;
    }

    reader = new FileReader();    
    reader.onloadend = function (event) {
         var binaryString = '',
             bytes = new Uint8Array(event.target.result),
             length = bytes.byteLength,
             i,
             base64String;

         // convert to binary string
         for (i = 0; i < length; i++) {
             binaryString += String.fromCharCode(bytes[i]);
         }

         // convert to base64
         base64String = btoa(binaryString);

         Ext.Ajax.request({
             url: 'save-file.php',
             method: 'POST',
             params: {
                 data: base64String
             }
         });
    };

    reader.readAsArrayBuffer(file);
}

Answer 4

您正在文件上传字段中查找事件change。

代码可能如下所示：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Upload Panel',
    items: [{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...',
        listeners: {
            change: function (me, value, eOpts) {
                console.log('trigger upload of file:', value);
            }
        }
    }],
});

小提琴https://fiddle.sencha.com/#view/editor&fiddle/1pd2