Extjs 4上传成功功能没有反应
Extjs 4 upload 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');
});
}
});
});
如果需要,我可以提供更多的代码,提前感谢
错误信息是明确的:您的响应由于跨域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
- 这个图像加载功能有什么作用
- 这两个 Angular 控制器之间的功能有什么区别吗?
- 这两个功能有什么区别
- 使用JQuery加载功能有什么缺点吗?
- 是否有反应/通量样板项目或生成器
- 角度 - 通过功能有条件地设置 ng-href
- 与台式机相比,移动浏览器的功能有多强大
- 任何人看到我的重置功能有错误
- 谷歌硬盘的网络主机链接功能有被淘汰的危险吗
- 编辑:I'我的按钮及其功能有问题
- 同时执行2个功能.有可能吗
- 滑动功能有问题
- 最有效:不同的功能/一个功能有案例
- 点击功能有问题
- 基础只对一定宽度有反应
- 焦点和模糊功能有问题
- Extjs 4上传成功功能没有反应
- 我有反应标签代码工作完美,但我需要改变html结构
- 我的表单验证功能有什么问题
- 我的流星地理定位功能有问题