Hello Im working on an image uploader.

This is my html & javascript:

Code HTML4Strict:
<script type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery("#upload").click(function () {
    $.ajax({
    type: "POST",
    url: "upload.php",
 
    });
});
 
</script>
 
 
<form action="" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" id="upload" value="Submit" />
</form>

AND this is my PHP:

PHP Code:
<?
$random 
time();

if (((
$_FILES["file"]["type"] == "image/gif")
|| (
$_FILES["file"]["type"] == "image/jpeg")
|| (
$_FILES["file"]["type"] == "image/pjpeg"))
&& (
$_FILES["file"]["size"] < 20000))
  {
  if (
$_FILES["file"]["error"] > 0)
    {
    echo 
"Return Code: " $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo 
"Upload: " $_FILES["file"]["name"] . "<br />";
    echo 
"Type: " $_FILES["file"]["type"] . "<br />";
    echo 
"Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo 
"Temp file: " $_FILES["file"]["tmp_name"] . "<br />";

    if (
file_exists("upload_pic/" $_FILES["file"]["name"]))
      {
      echo 
$_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      
move_uploaded_file($_FILES["file"]["tmp_name"],
      
"upload_pic/".$random.$_FILES["file"]["name"]);
      echo 
'<img src = "upload_pic/'.$random.$_FILES["file"]["name"].'"/>';
      }
    }
  }
else
  {
  echo 
"Invalid file";
  }
?>
How do I get the data selected in the file input to be recognized in my php? Do I have to somehow send the data through javascript?