Extjs 4上传成功功能不起作用 [英] Extjs 4 upload success function does not react

问题描述

我有一个带有工具栏的网格，并且在该工具栏上添加了一个上载选项，因此可以正常进行上载并且可以正常工作，但是将文件上载到服务器后，成功功能不会起作用.

i have a grid with an toolbar and on that toolbar an upload option is added, so the upload is alright and it works , but after the file was uploaded to the server the success function does not react.

这是我的上传代码:

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');
            });


        }
    });


});

如有需要，我可以提供更多代码

i can provide more code if necessary, thanks in advance

推荐答案

该错误消息是明确的:由于跨域iframe问题，您的响应丢失了.

The error message is explicit: your response is lost due to cross-domain iframe issue.

请参见文档

See the doc explanation of how file upload form are handled: a hidden iframe is created to receive the response from the server (because, before HTML5 it was not possible to upload a file using XHR). When the iframe is loaded, Ext parses its content to read the response.

但是，只有页面都在同一个域(包括端口号)上时，页面才能操纵其iframe内容.

But, it is only allowed for a page to manipulate its iframes content if both are on the same domain, including the port number.

当您将表单发布到http://localhost:3000时，很可能您正在访问http://localhost/上的页面.如此禁止:错误，对您无响应！

Most probably you're accessing your page at http://localhost/, while you're posting your form to http://localhost:3000. So forbidden: error, and no response for you!

这篇关于Extjs 4上传成功功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！