Extjs 4上传成功function不反应

我有一个工具栏的网格，并在该工具栏上添加了一个上传选项，所以上传是正常的，它的工作原理，但file upload到服务器后，成功function不反应。

在这里我的上传代码：

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问题，您的响应丢失。

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

但是，如果两个页面位于同一个域，包括端口号，则只允许页面操作其iframe内容。

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

Answer 2

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

问题描述：

当使用包含要上传的文件input的表单创buildExt.Ajax.request时，或者手动将isUpload选项设置为true，而不是执行正确的Ajax请求时Ext将标准HTML方式的表单提交到dynamic生成的隐藏。 然后从iframe中读出json响应主体来创build伪装的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将其document.domain设置为“home.example.com”。 因此，当home.example.com页面上的Ajax.request中的ExtJS代码尝试从iframe中提取文档主体时，它将被相同的原始策略阻塞，并且传递给callback函数的响应将错误地为空responseText的。

解决方法： 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