PHP and Ajax file upload - Can't get the tmp_name with $_FILES

Question

I'm trying to upload a file using Ajax, but I'm having troubles handling the file... For test purposes I've build a simple code that looks like this:

JS:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST",document.getElementById('upload').action,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var cmdStr="q="+str;
xmlhttp.send(cmdStr);

document.getElementById("ResponseDiv").innerHTML=xmlhttp.responseText;

PHP:

$q=$_POST["q"];
echo $q;

It works fine and xmlhttp.responseText prints [object File].

My problem, however, is that I need to get the temporary file name with $_FILES["q"]['tmp_name']. To do so I have changed the code to the following:

JS:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST",document.getElementById('upload').action,true);
xmlhttp.setRequestHeader("enctype","multipart/form-data");
var cmdStr="q="+str;
xmlhttp.send(cmdStr);

document.getElementById("ResponseDiv").innerHTML=xmlhttp.responseText;

PHP:

$q=$_FILES["q"]["tmp_name"];
echo $q;

Problem is that now with xmlhttp.responseText I don't get anything. Anyone knows what I'm doing wrong?

Solution

Check out this answer for making file uploads with AJAX. It is possible, but not compatible in all browsers.

jQuery Upload Progress and AJAX file upload

--

Alternatively, if you want on the fly uploads, there is a cool library you can get called 'Uploadify'. It's a flash/jquery (or HTML5 now) rig that allows you to upload files on the fly. In the flash version, last time I used it... you can add in callback functions to make it do essentially anything you want.

Some clever javascript could make this work for you.

http://www.uploadify.com/

Comments

[don]

I've tried with $_FILES['q']['error'] but still without any response from the server... My problem is that I would like to implement drag and drop to upload a file, isn't it possible anyhow? I actually don't really need Ajax, but for what I've seen around the only option seemed to be Ajax, but then if you say so I'm a bit confused...

[don]

Perfect thank's! I've looked at the other question and realized how to use formData. It has solved the problem, now it gets the file with Ajax as I was trying to do.

[Alex]

This answer may have been valid at the time of posting but may not be completely correct today