Post form fields + file using xhr, and reconstruct server side

Question

I'm trying to submit an HTML form's data to a php script via an XHR request.

I've hit a problem with the code however which I suspect has something to do with the back-end side of things, however might be doing something incorrect in javascript which is as follows:

var fd = new FormData();
fd.append("title", $('#uploadVidTitle').val());
fd.append("proj", $('#uploadVidProject').val());
fd.append("desc", $('#uploadVidDesc').val());
fd.append("action", $('#uploadAction').val());
console.log(fd);
fd.append("uploadFile", document.getElementById('videoUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "actions.php", false);
xhr.send(fd);

Currently in the php code I'm getting the forms contents via the $_POST["name"] method, however cannot retrieve the files contents using $_FILES["name"]. Any pointers would be greatly appreciated.

possible duplicate of [How can I upload files asynchronously with JQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Quentin, Jul 18 '11 at 18:49
jQuery isn't the point, and many of the answers to the duplicate question don't use it. — Quentin, Jul 18 '11 at 18:56

Andreas · Answer 1 · 2011-07-18T19:06:10.713

0

You might want to try setting some request headers before sending the request:

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

or

xhr.setRequestHeader("Content-type", "multipart/form-data");

Also inspect the $_FILES superglobal after POST request is sent to see if any files can be accessed from it.

edited Jul 18 '11 at 19:06

answered Jul 18 '11 at 18:57

Andreas

5,305
4
41
60

score 0 · Accepted Answer · answered Jul 18 '11 at 19:02

0

I think problem at server side. Ty this

foreach ($_FILES as $id => $val)
      if (isset($_FILES[$id]['name']) && $_FILES[$id]['name'] != '')
      {
          //process files

Retrieving file names by using $_FILES[$id]['name'] worked for me.

answered Jul 18 '11 at 19:02

Molecular Man

22,277
3
72
89

Post form fields + file using xhr, and reconstruct server side

2 Answers2