PHP Image Upload Via JQUERY

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/