file-upload - 为什么extjs表单提交中不调用成功回调？

Question

我正在尝试使用 Ext JS 表单上传文件，如果成功或失败，请显示适当的消息。但我无法得到想要的结果。我无法使success或failure回调起作用form.submit。

我到目前为止所做的是：

使用此脚本创建表单：

new Ext.FormPanel({
    fileUpload: true,
    frame: true,
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
}).getForm().submit()


​/*
    The response Content-Type is text/html (with charcode=utf8);
    The response JSON is: { "success": true }
*/​​

Content-Type根据这个 answer设置响应text/html。 根据Ext JS 文档发回适当的 JSON 结果。通过 Fiddler 捕获的响应是：

{"success":false}

或者

{"success":true}

我什至将响应 Content-Type 设置为application/json. 但仍然没有成功。

我已经阅读过类似this和this的链接，但没有一个有帮助。请注意，我还尝试了另一个创建表单的脚本，其中包含一个上传字段和一个保存按钮，并且我在保存按钮的处理程序中提交了表单。但仍然没有触发回调。

Answer 1

这是一个工作示例 - Javascript 代码：

Ext.onReady(function () {

    Ext.define('ImagePanel', {
        extend: 'Ext.form.Panel',
        fileUpload: true,
        title: 'Upload Panel',
        width: 300,
        height: 100,

        onUpload: function () {
            this.getForm().submit({
                url: 'upload.php',
                scope: this,
                success: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Success: " + data.msg);
                },
                failure: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Failure: " + data.msg);
                }
            });
        },

        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'fileuploadfield',
                        buttonText: 'Upload',
                        name: 'uploadedFile',
                        listeners: {
                            'change': {
                                scope: this,
                                fn: function (field, e) {
                                    this.onUpload();
                                }
                            }
                        }
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('ImagePanel', {
        renderTo: Ext.getBody()
    });
});

和PHP代码：

<?php
if (isset($_FILES)) {
    $temp_file_name = $_FILES['uploadedFile']['tmp_name'];
    $original_file_name = $_FILES['uploadedFile']['name'];

    echo '{"success": true, "msg": "'.$original_file_name.'"}';

} else {
    echo '{"success": false, "msg": "No Files"}';
}

Answer 2

我也为此苦苦挣扎了一段时间。这是我的代码：

Ext.getCmp('media-upload-form').getForm().doAction('submit', {
    url: './services/recordmedia/upload',
    method: 'post',
    waitMsg: 'Please wait...',
    params: {
        entityId: this.entityId,
    },
    failure: function(form, action){
        alert(_('Error uploading file'));
        this.fireEvent('file-upload');
        this.close();
    },
    success: function(form, action){
        this.fireEvent('file-upload');
        this.close();
    },
    scope: this
})

响应总是被浏览器包裹在 <pre> 标记中，这导致 Extj 库不调用回调。要解决这个问题：

• 确保您的服务器返回正确的 json: {"success":true}
• 确保内容类型设置为 text/html

Answer 3

实际上，Ext.form.Panel 和 Ext.form.Basic 的文档很好地涵盖了这一点。您的代码不起作用的问题是表单面板没有配置选项“成功”、“失败”。您应该将它们放在传递给提交操作的配置对象中。所以你的代码应该是这样的：

new Ext.FormPanel({
    fileUpload: true,
    frame: true


}).getForm().submit({
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
});

注意区别：在 Ext 4 中，有一个表单组件（Ext.form.Panel），它基本上是一个关注表单外观的视图组件，然后是底层表单类（例如 Ext.form.Basic）与功能。表单提交由 Ext.form.Basic （或您返回的任何内容form.getForm()）处理。