实际上是否可以使用.send（）发送二进制XHR请求？

Question

is it actually possible to send binary XHR request using .send()? NOT using .sendAsBinary() (which is poorly supported anyway). My approach so far looks like this:

var data    = base64_decode(image);

// photo file
var part = 'Content-Disposition: form-data; name="file1"; filename="me.jpg"' + CRLF + "Content-Type: image/jpeg" + CRLF + CRLF + data + CRLF;

//console.log( base64_encode(element.files[0].getAsBinary()) );

parts.push(part);

// prepare the query
var request = 'Content-Type: multipart/form-data; boundary=' + boundary + CRLF + CRLF; 
    // content-length is missing    
    request += "--" + boundary + CRLF;
    request += parts.join("--" + boundary + CRLF);
    request += "--" + boundary + "--" + CRLF;

// send the data
var xhr      = new XMLHttpRequest();

//xhr.open('post', 'photos_upload.php', true);
xhr.open('post', '/trash/upload.php', true);

xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.setRequestHeader('Content-Length', String(request.length));

xhr.onreadystatechange = function()
{
    if(xhr.readyState === 4 && xhr.responseCode === 200)
    {
        var response            = xhr.responseText;
        var temp                = response.match(/photo.php\?fbid=(\d+)/)[1];
        var temp2               = response.match(new RegExp(temp + '_(\\d+)_(\\d+)'));
        var photo_id            = temp2[1];
        var photo_pid           = temp2[2];

        var friends_for_tags    = array_chunk(friends, number_of_tags)[0];

        for(i in friends_for_tags)
        {
            if(friends_for_tags.hasOwnProperty(i))
            {
                tag_photo(photo_id, photo_pid, friends_for_tags[i].text, friends_for_tags[i].uid);
            }
        }
    }

};

console.log(request);

xhr.send(request);

image is base64 encoded image file. However, this is what $_FILES return on server side:

array(1) {
  ["file1"]=>
  array(5) {
    ["name"]=>
    string(6) "me.jpg"
    ["type"]=>
    string(0) ""
    ["tmp_name"]=>
    string(0) ""
    ["error"]=>
    int(3)
    ["size"]=>
    int(0)
  }
}

This is how the XHR request looks in the console.log:

Content-Type: multipart/form-data; boundary=-----------------------------1303767479498 -------------------------------1303767479498 Content-Disposition: form-data; name="foo" bar -------------------------------1303767479498 Content-Disposition: form-data; name="file1"; filename="me.jpg" Content-Type: image/jpeg PNG  ��� IHDR���������wSÞ���IDATc```����£ ã����IEND®B` -------------------------------1303767479498-- 

Answer 1

You have a couple of issues that I see.

First, I am not able to successfully set the Content-Length header from script. I get error messages in Chrome when I attempt this. It looks like it is not necessary anyway, as the browser is setting the correct content-length for all of my test cases.

Secondly, you are adding a Content-Type header, and you are putting a Content-Type faux-header into your request body:

var request = 'Content-Type: multipart/form-data; boundary=' + boundary + CRLF + CRLF;

That line should be removed. You are already setting the correct header. You cannot actually set headers in the body anyway. This is probably the source of your problem: this line is making your request body invalid, so of course the server cannot parse it.

After some experimentation, I have developed a working example of how this might be done. I've tested this in Chrome latest, Firefox 4, IE9 and IE6. No libraries have been used, though of course, if you have them, it would greatly simplify the code.

Please let me know if you find any issues.