I am trying to figure out how to send a file and paramaters within the same XMLHttpRequest. Is this possible?

Obviously I can do xhr.send(file+params) or xhr.(file,params). And I don't think I can set two different request headers to do this...

xhr.setRequestHead('X_FILENAME', file.name)
xhr.send(file);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);

Is there some way to send the params without having to use GET, or a secondary xhr request?

I am trying to figure out how to send a file and paramaters within the same XMLHttpRequest. Is this possible?

Obviously I can do xhr.send(file+params) or xhr.(file,params). And I don't think I can set two different request headers to do this...

xhr.setRequestHead('X_FILENAME', file.name)
xhr.send(file);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);

Is there some way to send the params without having to use GET, or a secondary xhr request?

• javascript
• ajax
• html
• xmlhttprequest

• 2 you may have to use FormData developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData – Arun P Johny Commented Mar 5, 2013 at 7:44
• Also refer stackoverflow.com/questions/5602021/… and stackoverflow.com/questions/6974684/… – Arun P Johny Commented Mar 5, 2013 at 7:45
• @ Charles: How are you sending a file via XHR? Did you read it client-side via the File API, or...? (It matters, because if you read it client-side via the File API, then it's just another parameter...) – T.J. Crowder Commented Mar 5, 2013 at 7:49

2 Answers 2

If you rely on browser which supports FormData, you can use the code below (JavaScript):

var formData = new FormData();
formData.append('param1', 'myParam');
formData.append('param2', 12345); 
formData.append('uploadDir', 'public-data');  
formData.append('myfile', file);

xhr.send(formData);

Then, on your server side you can have access to your variables by using this code (PHP):

<?
  $param1 = $_POST['param1']; //myParam
  $param2 = $_POST['param2']; //12345
  $uploaddir = $_POST['uploadDir']; //public-data
  $fileName = $_FILES['myfile']['name'];
  $fileZise = $_FILES['myfile']['size'];
  $uploaddir = getcwd().DIRECTORY_SEPARATOR.$uploaddir.DIRECTORY_SEPARATOR;
  $uploadfile = $uploaddir.basename($fileName);       
  move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile);
  echo $fileName.' ['.$fileZise.'] was uploaded successfully!';
?>

To get all parameters of $_FILES['myfile'], use var_dump($_FILES["myfile"])

Is there some way to send the params without having to use GET, or a secondary xhr request?

Yes, you can encode them into the URL (just like GET), even though you're doing a POST. E.g.:

xhr.open(yourUrl + "?foo=" + encodeURIComponent(foo) + "&bar=" + encodeURIComponent(bar));
// ...
xhr.send(file);

I'm assuming in the above that you must know something about sending a file via XHR that I don't know. :-)

Assuming that file is the actual content of the file, read via the File API, then isn't it just another parameter? So:

xhr.send(
    "filedata=" + encodeURIComponent(file) +
    "&foo=" + encodeURIComponent(foo) +
    "&bar=" + encodeURIComponent(bar)
);