开发者

XmlHttpRequest corrupts headers in Firefox 3.6 with "Content-Type:multipart/form-data"

开发者 https://www.devze.com 2023-01-08 00:54 出处:网络
I\'m working on \"multiple ajax uloader\". Works fine in bleeding edge browsers (Chrome 6, Firefox 4). But in Firefox 3.6 I must manualy create output string to be sended, cos this browser doesn\'t su

I'm working on "multiple ajax uloader". Works fine in bleeding edge browsers (Chrome 6, Firefox 4). But in Firefox 3.6 I must manualy create output string to be sended, cos this browser doesn't support FormData object.

I followed many tutorial, especialy this. Author notify about correct setup of headers & content of body to be sended. I carefully followed that advises, but Firefox 3.6 fail my efforts.

This is correct setup of headers and body (captured by submitting simple static form): correct headers, correct body

This is what I get, when I use Firefox's xhr object to submit same data: wrong headers, wrong body

As you can see xhr's headers are corrupted. This lead in total failure of file upload. Here is a code I use:

function generateBoundary()
{
    var chars = '0123456789',
        out   = '';

    for( var i = 0, len = chars.length; i < 30; i++) {
       out += chars[Math.floor(Math.random()*len)];
    }

    return '----' + out;
}

function getMultipartFd(file, boundary)
{
    var rn   = '\r\n',
        body = '';

    body  = boundary + rn;
    body += 'Content-Disposition: form-data; name="Files[]"; filename="' + file.name + '"' + rn;
    body += 'Content-Type: ' + file.type + rn + rn;
    body += file.getAsBinary() + rn;

    return body;
}

$(function(){

    $startUpload.click(function(){
        var url      = $uploadForm.attr('action'),
            xhr      = new XMLHttpRequest(),
            boundary = generateBoundary(),
            file     = null,
            body     = '';

        file = $SOME_ELEMENT_WITH_ATTACHED_FILE.file;
        body = getMultipartFd(file, boundary);

console.info(file);
console.info(body);

        xhr.upload.onload = function(){
            console.info('done');
        };

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
        xhr.sendAsBinary(body + boundary + '--' + '\r\n');
        return false;
    });

});

Here is also a dump of开发者_如何学编程 file and body variables: dump file, dump body

Have anybody any idea, why xhr is corrupting headers this way?


I was scoping problem. I tried to use code in fresh Firefox installation under WinXP (my primary system is Arch Linux). Problem remains. I found that Mozilla's xhr has additional property called 'multipart'. With this set to true, headers is OK, but my xhr.events aren't fired - JS crash after sending file.

I scoped bit more deep with Firebug's JS debugger and found, that after xhr.multipart = true; code jumps into deep waters of jQuery library, where strange things happens around some curious events.

Even more curiou is that headers/content seems to be right in Firebug's console, but in HttpFox extension, it is corrupted.

0

精彩评论

暂无评论...
验证码 换一张
取 消