Javascript XHR send multipart/form-data

Question

I'm trying to send a multipart/form-data content-type request:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
         alert(xhr.responseText);
    }
}

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type","multipart/form-data; boundary=---------------------------275932272513031");

xhr.send('-----------------------------275932272513031 Content-Disposition: form-data; name="name"

test

----------------------------275932272513031--');

Then in php I just print the $_POST array

print_r($_POST);

But I get an empty array each time. I expect to see

Array (
    name => "test"
)

What am I doing wrong?

Answer 1

Your code failed because you've used "Enter" instead of an escaped line break character (\n).
JavaScript doesn't support "first line[Enter]second line". If you need a string with a line break, use "first line\nsecond line".

Once you've fixed this problem, your code should work as intended (with one caveat, see final note):

var xhr = new XMLHttpRequest();
xhr.onload = function() {
     alert(xhr.responseText);
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type","multipart/form-data; boundary=---------------------------275932272513031");
xhr.send('-----------------------------275932272513031\n' +
         'Content-Disposition: form-data; name="name"\n\n' +
         'test\n\n' +
         '----------------------------275932272513031--');

NOTE: Your code will only work for payloads that consists of UTF-8 characters, not binary data. If you want to learn more about submitting forms with binary data via XMLHttpRequest, see this answer and its linked references.