Can I use jquery post with image uploads?

Question

I'm trying to use jquery to submit my form like so but it's not triggering anything in the functions.php file. Do I need to do anything special with a multipart/form-data? Am I missing something?

HTML:

<form id="process_image_form" enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES); ?>" method="post" >
    <input type="hidden" name="image_id1" id="image_id1" />
    <table class="bordered-table">
        <tbody>                 
            <tr>
                <td><input name="file" type="file" id="file"/></td>
            </tr>
            <tr> 
                <td><button type="submit" class="btn primary" data-loading-text="Uploading..." id="upload_profile_photo" name="upload_profile_photo">Upload</button></td> 
            </tr>
        </tbody>
    </table>
</form>

Jquery call:

$('#upload_profile_photo').click(function(e) {
   e.preventDefault();

    $.post('gallery/functions.php', $("#process_image_form").serialize(), function(status) {
        if (status.st) {
            alert("Photo Uploaded");
        }
    }, "json");
});

functions.php:

if (isset($_POST['upload_profile_photo'])) {

    if (isset($_FILES['file']) && $_FILES['file']['size'] > 0) {

        //handle file upload
        $size = filesize($_FILES['file']['tmp_name']);
        if ($size > $max_file_size * 1024 * 1024) {
            $res->error = '<div class="alert-message error">Your image file is too large. Reduce its size and try uploading again.</div>';
            echo json_encode($res);
            exit();
        }
        if ($res->error == "") {
            //process image
            $res = uploadImage($_FILES['file']['tmp_name'], $user_id);
            if ($res->st) {
                unlink($_FILES['file']['tmp_name']);
                $res->msg = '<div class="alert-message success">Your profile photo was uploaded successfully!</div>';
                echo json_encode($res);
                exit();
            }
        }
    }
    else {
        $res->error = '<div class="alert-message error">Please select a photo to upload.</div>';
        echo json_encode($res);
        exit();
    }
}

Answer 1

jquery serialize method will not work on file inputs. Look here please: How can I upload files asynchronously?

---

I have a great experience with jquery file upload plugin for this purpose.