如何使用XMLHttpRequest在跨域上发送文件?

时间:2014-02-25 13:14:04

标签: javascript ajax xmlhttprequest cross-domain

我正在尝试在另一个域上发送文件,但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。

我尝试使用AJAXFile 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();
    }
});

2 个答案:

答案 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来完成,因此这是您需要查看的方向。它有很多在线示例,我认为您在查找和实现它时不会遇到任何问题。