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?

Please post code that reflects your real code. Your current code doesn't even run. Where are your escaped line terminators? — Rob W
– Rob W, Commented Dec 22, 2013 at 14:52
JavaScript doesn't support "first line[Enter]second line". Instead, you have to use "first line\nsecond line" if you want to get a string with a line break inside it. — Rob W
– Rob W, Commented Dec 22, 2013 at 15:03
This link has nice examples of XMLHttpRequest use, even file upload. — Glavić
– Glavić, Commented Dec 22, 2013 at 15:13

Community · Accepted Answer · 2017-05-23 11:59:43Z

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.

Awesome, thanks for the reference, really explains a lot now!
It's maybe helpful to mention that the boundary seperator is always prefixed with two (additional) dashes and suffixed with two more at the end of the body. That is if you have ...boundary=bound750 in the header then in the body you need --bound750\n and --bound750-- as the last line.
...and that dashes are not required in the boundary at all. It might make sense to change the post to boundary=275932272513031 and then the two hyphens to each line --275932272513031 (to clarify the requirement)

Collectives™ on Stack Overflow

Javascript XHR send multipart/form-data

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related