Question

Ext JS提供了fileuploadfield，它与一个按钮捆绑在一起，可以浏览本地文件。我只需要在从本地选择文件时立即上传文件，而不是使用提交按钮来触发后期处理。找不到在选择文件后触发的事件。

P.S。实际上，我使用的版本是 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){ }
});

在线演示here

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

您正在fileuploadfield上寻找事件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

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

4 个答案: