我正在尝试在另一个域上发送文件,但progress event
无效。如果我评论onprogress
函数,则文件上传得很好,否则会发生错误:
OPTIONS http://another-domain.com No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access.
XMLHttpRequest cannot load http://another-domain.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access.
以下是代码:
$("form").on("submit", function(e) {
e.preventDefault();
var file = $("#file")[0].files[0];
var fd = new FormData();
fd.append("Filedata", file);
var xhr = getXDomainRequest();
xhr.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
}
};
xhr.onload = function() {
if (this.status == 200) {
var resp = JSON.parse(this.response);
console.log('Server got:', resp);
}
};
xhr.open('POST', 'http://another-domain.com', true);
xhr.send(fd);
});
function getXDomainRequest() {
var xdr = null;
if (window.XDomainRequest)
xdr = new XDomainRequest();
else if (window.XMLHttpRequest)
xdr = new XMLHttpRequest();
else
alert("Cross Domain not supported");
return xdr;
}
我无法修改another-domain.com
,因为它是一个API。
我尝试使用AJAX
,File Upload
,但我也无法使用progress
事件。
有什么想法吗?
修改
以下是File Upload
的另一种解决方案$('#fichier').fileupload({
dataType: "jsonp", // API error
beforeSend : function() {
$("#upload_progression_pj").show();
},
progress: function (e, data) {
var actuel = Math.round(data.loaded * 100 / data.total);
log(actuel);
$("#upload_progression_pj span").html( actuel + "%" );
},
done: function (e, data) {
$("#upload_progression_pj").hide();
$("#upload_progression_pj span").empty();
}
});
答案 0 :(得分:0)
如果您使用XHR2上传文件来源,并且you want to track upload progress,您的服务器将需要处理预检(OPTIONS)请求,浏览器将在发送基础上传POST请求之前发送这些请求。当然,除了此服务器必须具有的非预检CORS请求的支持之外,这也是如此。
XHR2的上传进度专门触发预检,即使上传POST请求没有其他任何内容要求预先设置跨源请求。我stumbled into this a while back myself。
如果您无法控制服务器并且它不处理OPTIONS /预检请求,您将无法使用上传进度事件。
答案 1 :(得分:-2)
跨域ajax只能使用JSONP来完成,因此这是您需要查看的方向。它有很多在线示例,我认为您在查找和实现它时不会遇到任何问题。