javascript - Extjs 4 上传成功函数没有反应

Question

我有一个带工具栏的网格，在该工具栏上添加了一个上传选项，所以上传没问题并且可以正常工作，但是在文件上传到服务器后，成功功能没有反应。

这里是我的上传代码:

upload: function () {

        Ext.create('Ext.window.Window', {
            title: 'Upload',
            width: 300,
            layout: 'fit',
            draggable: false,
            resizable: false,
            modal: true,
            bodyPadding: 5,


            items: [{
                xtype: 'form',
                bodyPadding: 10,
                frame: true,
                items: [{
                    xtype:'filefield',
                    name:'file',
                    fieldLabel: 'File',
                    buttonText: 'Select File',
                    labelWidth: 30,
                    anchor: '100%'
                }, {
                    xtype: 'button',
                    text: 'Upload',
                    handler: function(){                        
                         var form = this.up('form').getForm();

                         if(form.isValid()){
                             form.submit({  
                                 method: 'POST',     
                                 url: 'http://localhost:3000/upload',

                                 success: function (form, action) {
                                     Ext.Msg.alert('Success', 'Your File has been uploaded.');
                                     console.log(action);
                                 },
                                 failure : function (form,action) {
                                     Ext.Msg.alert('Error', 'Failed to upload file.');
                                 }

                             })
                         }

                    }
                }] 
            }],

        }).show();

    },  

});

和服务器响应:

app.post('/upload', function(req, res) {

    res.header('Access-Control-Allow-Origin', '*');
    res.header('Content-Type','application/json; charset=UTF8');

    var tmp_path = req.files.file.path;
    var newPath = __dirname + '/files/' + req.files.file.name;
    fs.rename(tmp_path, newPath, function (err){
        if (err) throw err;

    });


    var path = newPath;
    var name = req.files.file.name; 

    connection.query('SELECT name FROM audio WHERE name = ?', [name] , function(err,result) {

        if (result[0]) {
            console.log('File already exist');
            res.status(400).send(JSON.stringify());

        } else {

            connection.query('INSERT INTO audio (name, path) VALUES (?,?)', [name,path], function (err,result) {
                if (err) throw err;

                var test = {
                    success: true
                };

                res.send({success:true});
                console.log('success');
            });


        }
    });


});

如有必要，我可以提供更多代码，在此先感谢

Answer 1

错误消息很明确:由于跨域 iframe 问题，您的响应丢失。

参见 doc如何处理文件上传表单的解释:创建一个隐藏的 iframe 来接收来自服务器的响应(因为在 HTML5 之前，不可能使用 XHR 上传文件)。加载 iframe 时，Ext 解析其内容以读取响应。

但是，只有在同一个域(包括端口号)上的页面才允许操作其 iframe 内容。

很可能您正在通过 http://localhost/ 访问您的页面，而您正在将您的表单发布到 http://localhost:3000。 So forbidden: 错误，没有给你回复!