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

ExtJS提供了一个与浏览本地文件的按钮捆绑在一起的浏览器。我只需要上传一个文件，一旦它是从本地选择，而不是使用提交按钮，以触发后处理使用。找不到在选择文件后激发的事件

---

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

您正在文件上载字段中查找事件

代码可能如下所示：

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);
            }
        }
    }],
});

---

Fiddle

如果要提交文件，则需要使用表单。即使您希望按钮位于工具栏中，也可以将其包含在表单中，并且它看起来仍然像普通的工具栏按钮（您需要为此指定适当的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'
    }]
}]

工作提琴示例：

我同意您的观点，为了回答最初的问题，在工具栏中嵌入表单可能是最简单的解决方案：

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

其思想是在客户端（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);
}

函数（文件字段）{
var file=fileField.fileInputEl.dom.files[0]，
读者；
如果（文件===未定义的| |！（文件的文件实例））{
返回；
}
reader=newfilereader（）；
reader.onloadend=函数（事件）{
var binaryString=''，
字节=新的Uint8Array（event.target.result），
长度=字节。字节长度，
我
基线字符串；
//转换为二进制字符串
对于（i=0；i

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

---

在线演示

但仍取决于

表单提交

-我不使用

表单

。

文件上传字段

只是我的

工具栏

的一个项目。很好，感谢您的贡献，但是得到了异常

MultipartException：当前请求不是一个多部分请求

，因为我们没有将AJAX请求配置为多部分请求。这似乎是服务器端的配置/实现细节。我现在不在ExtJS 6上，所以我不确定Ext.Ajax与

方法一起使用的是哪种内容类型：“POST”

，但您应该能够使用浏览器的开发工具检查请求。也许您正在寻找以下内容：