0

我喜欢尝试通过 javascript XMLHttpRequest 发送带有附件的 POST 表单。

这是我的代码：

window.addEventListener('load', function() {
    var button = document.getElementById('start_file_upload_button');
    button.addEventListener('click', function()
        {
        document.getElementById("file_upload_button_button").style.display = "none";
        var mfs         = document.getElementsByName('MAX_FILE_SIZE')[0].value,
            to_up_files = document.getElementById('to_upload_files_field'),
            status      = document.getElementById('file_upload_status_text'),
            errorlog    = document.getElementById('file_upload_error_log'),
            progress    = document.getElementById('file_upload_progress_bar');
        for(var i = 0; i < document.getElementById('to_upload_files_field').files.length; ++i) {
            document.getElementById('remove_link_' + i).style.display = "none"; }
        for(var i = 0; i < <?php echo $__CONFIG['UPLOAD']['MAX_FILE_AT_ONCE']; ?>; ++i)
            {
            if(typeof(document.getElementById('to_upload_files_field').files[i]) == "undefined") break;
            var upload   = document.getElementById('to_upload_files_field').files[i],
                filename = upload.name,
                filesize = upload.size,
                mfs      = mfs; alert(filename);
            if(filesize > <?php echo $USER_DATA['UPLOAD_MAX_FILE_SIZE']; ?>)
                {
                var errorelem  = document.createElement('span');
                var errorbreak = document.createElement('br');
                errorelem.appendChild(document.createTextNode('Die Datei "' + filename + '" ist zu Groß'));
                errorelem.appendChild(errorbreak);
                errorlog.appendChild(errorelem);
                break;
                }
            if(<?php echo $USER_DATA['SPACE_MAX']; ?> < (filesize + <?php echo $USER_DATA['SPACE_USED']; ?>))
                {
                var errorelem  = document.createElement('span');
                var errorbreak = document.createElement('br');
                errorelem.appendChild(document.createTextNode('Die Datei "' + filename + '" past nicht mehr auf die Platte'));
                errorelem.appendChild(errorbreak);
                errorlog.appendChild(errorelem);
                break;
                }
            if(filesize > (<?php echo $USER_DATA['TRAFFIC_PER_DAY'] - $USER_DATA['TRAFFIC_USED']; ?>) && (<?php echo $USER_DATA['TRAFFIC_PER_DAY'] - $USER_DATA['TRAFFIC_USED']; ?>) != 0)
                { // SPERRE EINBAUEN DAS ES NUR GEPRÜFT WIRD WENN DIE TRAFFIC ÜBERWACHUNG AKTIVIERT IST
                var errorelem  = document.createElement('span');
                var errorbreak = document.createElement('br');
                errorelem.appendChild(document.createTextNode('Die Datei "' + filename + '" braucht mehr traffic als du hast'));
                errorelem.appendChild(errorbreak);
                errorlog.appendChild(errorelem);
                break;
                }
            status.innerHTML = "Lade " + filename + " hoch...";
            var request = new XMLHttpRequest();
            request.open('POST', 'http://www.domain.tld/user/upload/', true);
            request.setRequestHeader('Content-Type', 'multipart/form-data');
            request.upload.addEventListener('progress', function(evt)
                {
                var uploaded = Number((100 / evt.total) * evt.loaded).toFixed(2);
                progress.innerHTML = "Upload zu " + uploaded + "% fertig";
                if(uploaded = 100.00)
                    {
                    progress.innerHTML = "Datei wird verarbeitet... Bitte warten...";
                    }
                }, false);
            request.addEventListener('load', function(evt) {
                alert("lol2"); }, false);
            var data = new FormData();
            data.append('upload_key', '<?php echo $upload_key; ?>');
            data.append('MAX_FILE_SIZE', mfs);
            data.append('file', upload);
            request.send(data);
            request.onload = function()
                {
                if(this.status == 200)
                    {
                    alert("lol");
                    }
                else
                    {
                    alert("Some Upload Error");
                    }
                };
            }
        }, false);
    }, false);

当我将脚本发送到“ http://www.domain.tld/user/upload/ ”时，该脚本运行良好且没有问题，但我喜欢将其发送到“ http://sub.somain.com/store/ ” “这不起作用，为什么？

通过发送到“www.domain.tld”的控制台日志：

[12:21:51.085] POST http://www.domain.tld/user/upload/[HTTP/1.1 200 OK 5ms]

通过发送到“sub.domain.tld”的控制台日志：

[12:21:17.786] 选项http://sub.domain.tld/store/[HTTP/1.1 200 OK 7ms]

服务器运行相同的脚本，我该怎么办？

4

2 回答 2

1

Javascript 不允许您在域之间发出请求，但是，如果服务器发送Access-Control-Allow-Origin带有白名单域名称的标头，则可以更改此行为。

CORS

正如我所说，您可以使用特殊的响应标头来允许跨域请求。这种方法称为CORS - Cross Origin 资源共享。
它是这样使用的：

header("Access-Control-Allow-Origin: www.domain.tld");

不幸的是，这只是最近才引入的，并且浏览器支持很差。

CORS 浏览器支持

JSONP

另一种触发跨域请求的方法是 JSONP。这只能应用于 GET 请求。因为你是发POST，我就不多介绍了。

框架

您可能已经忘记了使用 iframe 的可能性。当然，在这种情况下，您不会得到任何返回值，也无法监控上传过程。但是，如果您alert()在 iframe 中触发功能，您仍然可以通知用户有关成功的信息。此外，您可以从 iframe 重新加载页面：

window.top.location = "domain.com/script.php?upload=sucessfull";
于 2013-02-12T11:51:12.140 回答
0

你违反了“同源政策”。您可以返回Access-Control-Allow-Origin标头，这将告诉浏览器允许请求，但是浏览器支持不是 100%。查看您的 Web 服务器或编程语言的文档。

如果您需要 100% 的浏览器支持，那么您最好上传到父域上的 /tmp，然后向子域发出 cURL 请求。

于 2013-02-12T12:06:47.737 回答