2

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

这是我的上传代码：

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


        }
    });


});

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

4

2 回答 2

1

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

请参阅如何处理文件上传表单的文档说明：创建隐藏的 iframe 以接收来自服务器的响应（因为在 HTML5 之前，无法使用 XHR 上传文件）。加载 iframe 时，Ext 解析其内容以读取响应。

但是，只有在两个都在同一个域上时，才允许页面操纵其 iframe 内容，包括端口号。

http://localhost/很可能您在将表单发布到 时访问您的页面http://localhost:3000。所以禁止：错误，并且没有回应你！

于 2013-06-14T10:43:51.393 回答
0

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

问题描述：

当您使用包含要上传的文件输入的表单发出 Ext.Ajax.request 时，或者手动将 isUpload 选项设置为 true，而不是执行正确的 Ajax 请求时，Ext 以标准 HTML 方式将表单提交给动态生成的隐藏. 然后从 iframe 中读取 json 响应正文以创建伪造的 Ajax 响应。如果发出上传 Ajax 请求的页面更改了其 document.domain 属性，则会出现问题，例如 home.example.com 中的页面包含来自 static.example.com 的资源，它希望使用 javascript 操作而不违反浏览器的同源-policy，因此两者都将其 document.domain 设置为“example.com”。如果 home.example.com 然后向 home.example.com 服务器上的 url 发出上传 Ajax 请求，则写入响应的 iframe 将具有其文档。域为“home.example.com”。因此，当 home.example.com 页面上的 Ajax.request 中的 ExtJS 代码尝试从 iframe 中提取文档正文时，它将被同源策略阻止，并且传递给回调函数的响应将错误地为空响应文本。

解决方法： 1. 在发出上传请求时将 document.domain 传递给服务器。2. 在您的服务器响应中，在您的响应文本/html 中添加 document.domain。

response.setHeader('Content-Type', 'text/html'); response.write('document.domain = "' + params.__domain + '";'); response.write(JSON.stringify({msg: 'Welcome ' + params.name})); response.end('');

细节 ：

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

于 2014-05-29T14:56:38.643 回答