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

これは Sencha Forum で Uberdude によって特定された Ext js のバグです。

問題の説明:

アップロードするファイル入力を含むフォームで Ext.Ajax.request を作成するか、手動で isUpload オプションを true に設定すると、適切な Ajax リクエストを実行するのではなく、Ext は動的に生成された隠しファイルに標準の HTML の方法でフォームを送信します。 . 次に、json レスポンスの本文が iframe から読み取られ、偽の 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 から抽出しようとすると、same-origin-policy によってブロックされ、コールバック関数に渡される応答が誤って空になります。応答テキスト。

回避策: 1. アップロード要求を行うときに、document.domain をサーバーに渡します。2. サーバー応答で、応答 text/html に document.domain を追加します。

response.setHeader('Content-Type', 'text/html'); response.write('document.domain = "' + params.__domain + '";'); response.write(JSON.stringify({msg: 'ようこそ' + 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 に答える