File Upload php/jquery

[websponge]

I have a simple form that uses a bit of jquery,

<form action="" method="post"
enctype="multipart/form-data">
<label for="file">Upload File:</label>
<input type="file" name="userfile" id="userfile" />
<input type="button" value="Submit" onclick="uploadfile()"/>
</form>

the uploadfile() in my .js file looks like this:

function uploadfile(){
var userfile = document.getElementById('userfile').value;
var username = document.getElementById('username').value;
$.post("php/upload.php", {userfile: userfile,username: username},function(data) {
$('#headercontent2').show().html (data);
});
}

as you can see it is supposed to post userfile to the php script see below:

<?php
$userfile = $_POST['userfile'];
$uploaddir = '../data/daviesjc/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

echo "<p>";

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "File is valid, and was successfully uploaded.\n";
} else {
   echo "Upload failed";
}

?> 

It doesnt like this and I dont know how I can post the file back to php upload script? it works if I dont use jquery, but I need to for this simple project.. can anyone help please?

Thanks

[minitauros]

Googling I found something that might help you:

Ajax in the traditional sense is XMLHttpRequest, which does not allow you encode and send local files to a server.

The common ways of doing uploading through "ajax" means, is to either use a Flash swf to handle the uploading on the same page, or to use a form that has a target of an invisible 1x1 iframe. You have some Javascript show a uploading spinner or whichever. After the file is uploaded, make the server return some Javascript to the iframe like

<script type="text/javascript">
top.MyProject.doneUploading();
</script>

top will allow you to call Javascript in the regular page. In order for that to work though, you must make sure the iframe has submitted to the same domain that the top document is located at.

(From this link). Some other info about Javascript / PHP uploading using HTML5 can be found here.

[websponge]

Thanks, I have read through a lot of these and they are helpful but they wont do what I need, the file needs to be uploaded to a certain directory (dependant on a PHP variable) but I cant pass the temp file to JQUERY so it can post it to a PHP file, but thank you for trying to help.

[websponge]

Anyone offer any help please? its driving me nuts, i just want to be able to send the tmp file location to my javascript function, then post that and another variable to a php upload form.. its all fine apart from the temp loaction,

really appreciate some help

[blocblue]

Why can you not use the iframe method?

If the temporary location is a part of the same form that is submitted to the iframe, the value will be passed to the server when the form is submitted.

[websponge]

do you mean display the results from upload.php in an Iframe on the same page? im not sure how that would work? can you elaborate please? thanks