Extjs 4上传成功功能没有反应

Extjs 4 upload success function does not react

本文关键字:功能 有反应 成功 Extjs      更新时间:2023-09-26

我有一个带有工具栏的网格,并且在该工具栏上添加了上传选项,因此上传是正确的并且它可以工作,但是在文件上传到服务器后,成功函数没有反应。

这里是我的上传代码:

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

        }
    });

});

如果需要,我可以提供更多的代码,提前感谢

错误信息是明确的:您的响应由于跨域iframe问题而丢失。

查看文档如何处理文件上传表单的解释:创建一个隐藏的iframe来接收来自服务器的响应(因为在HTML5之前,使用XHR上传文件是不可能的)。当iframe被加载时,Ext解析它的内容来读取响应。

但是,只有当两个页面在同一域中(包括端口号)时,才允许页面操作其iframes内容。

很可能你正在访问http://localhost/的页面,而你正在将表单发送到http://localhost:3000。所以禁止:错误,没有响应给你!

这是一个由Uberdude在Sencha论坛中发现的Ext js bug。

问题描述:

当您使用包含要上传的文件输入的表单发出Ext.Ajax.request时,或者手动将isUpload选项设置为true,而不是执行正确的Ajax请求时,Ext将以标准的HTML方式将表单提交给动态生成的隐藏。然后从iframe中读取json响应体,以创建一个虚假的Ajax响应。如果发出上载Ajax请求的页面更改了其文档,就会出现问题。域属性,例如,在home.example.com的页面包含来自static.example.com的资源,它希望用javascript操作而不违反浏览器的同源策略,所以两者都设置了他们的文档。域名改为"example.com"。如果home.example.com随后向home.example.com服务器上的url发出一个上传Ajax请求,那么将响应写入的iframe将拥有它的文档。域名为"home.example.com"。这样当ExtJS代码在Ajax内。在home.example.com页面上的请求试图从iframe中提取文档主体,它将被同源策略阻止,并且传递给回调函数的响应将错误地为空responseText。

变通:1. 传递文档。在发出上传请求时,将域添加到服务器。2. 在您的服务器响应中,添加文档。域名在您的响应文本/html。

反应。setHeader("内容类型","text/html");response.write("文档。Domain = "' + params. "__domain + '";');response.write (JSON。stringify({msg: 'Welcome ' + params.name});

response.end (");

Detail:

请参考:http://www.sencha.com/forum/showthread.php?136092-Response-lost-from-upload-Ajax-request-to-iframe-if-document.domain-changed