PHP Image Upload Via JQUERY - php

Question

I'm trying to pass form data (Avatar & User ID) through a jQuery POST command, but it won't upload the file. Can someone please point me in the right direction as to what I might be doing wrong? Here is the form and script:
<form id="avatar">
<script>
$(document).ready(function()
{
var ok = true;
$('#avatarButton').click(function()
{
var id=$("#id").val();
var avatar = $("#avatar").val();
if(ok == true)
{
$('.avatarValidation').html("Uploading Avatar").removeClass("error").addClass("success");
jQuery.post("php/<?php echo $usertype; ?>/avatar.php", {
id:id,
avatar:avatar
}, function(data, textStatus){
if(data == 1){
$('.avatarValidation').html("Profile Updated").removeClass("error").addClass("success");
}
else if(data == 2){
$('.avatarValidation').html("Error").removeClass("success").addClass("error");
}
});
}
else
{
$('.avatarValidation').html("No").removeClass("success").addClass("error");
}
return false;
});
});
</script>
<table>
<tr>
<td class="textColumn profileColumn">Add Avatar:</td>
<td class="profileInput inputColumn"><input type="file" id="avatar" name="avatar" value="<?php echo $yourname; ?>"/></td>
</tr>
<tr>
<td colspan="2"><input type="hidden" name="id" id="id" value="<?php echo $yourid; ?>"></td>
</tr>
<tr class="buttonSpacer"></tr>
<tr>
<td colspan="2">
<input type="submit" class="submitButton" id="avatarButton" value="Upload Avatar" />
<span class="submitValidation avatarValidation"></span>
</td>
</tr>
</table>
</form>
And here is the PHP to which the form data is passed to:
<?php
$id= mysqli_real_escape_string($con, $_REQUEST["id"]);
$avatar= mysqli_real_escape_string($con, $_REQUEST["avatar"]);
if ($_FILES['$avatar']['error'] > 0) {
echo "2"; //Echo Error
} else {
// array of valid extensions
$validExtensions = array('.jpg', '.jpeg', '.gif', '.png');
// get extension of the uploaded file
$fileExtension = strrchr($_FILES['$avatar']['name'], ".");
// check if file Extension is on the list of allowed ones
if (in_array($fileExtension, $validExtensions)) {
$newName = time() . '_' . $_FILES['$avatar']['name'];
$destination = 'avatar/' . $newName;
if (move_uploaded_file($_FILES['$avatar']['tmp_name'], $destination)) {
echo "1"; //Echo Success
}
} else {
echo "2"; //Echo Error
}
}
?>

Answer 1

You can try this plugin, it will take care of most of background work for you. They have PHP samples as well:
http://blueimp.github.io/jQuery-File-Upload/