Uploading image via AJAX along with username and email address

Question

I am having some trouble with my file upload script. The HTML is as follows:

<form method="post" name="imgsubmit" id="contact_form" action="PHP/imgupload.php"     enctype="multipart/form-data">
<label id="namelabel" for="username">Your name:</label><input id="username" type="text" name="username" rel="req">
<label id="labelemail" for="imgemail">E-mail:</label><input id="imgemail" type="email" name="imgemail" rel="req">
<label id="filelabel" for="file">Your photo:</label><input id="file" type="file" name="file">
<input id="imgsubmit" type="submit" name="submit" value="SUBMIT"></form>

I have a jquery validation script as which checks the username and email fields to see if they are valid, and returns a white border around them if they are not entered:

$(function () {
    $('#contact_form').submit(function (e) {
        e.preventDefault();
        var form = $('#contact_form');
        var post_url = form.attr('action');
        var post_data = form.serialize();
        var submit_form = false;
        var req_fields = $('input[rel=req]');
        var field, pcount = 0;
        req_fields.each(function () {
            field = $(this).val();
            if (field == '' || field == 'Required') {
                $(this).css('border', '1px solid white').val('');
                pcount += 1;
            } else {}
        });
        if (pcount == 0) {
            submit_form = true;
        }
        if (submit_form) {
            $.ajax({
                type: 'POST',
                url: post_url,
                data: post_data,
                success: function (msg) {
                    $(form).fadeOut;
                    form.html(msg).fadeIn();
                }
            });
        }
    });
});

The problem is that the username gets submitted to the php script, the email gets submitted to the php script, but the image doesn't get uploaded. I'm aware that AJAX now supports image uploading and that the form.serialize() is likely the root cause of the problem, but have not been able to edit this code correctly to support the image submission.

How can I adjust this code to include the image to be submitted to the php?

Answer 1

I like to use the jQuery Form Plugin for this kind of stuff, you just need to bind your form submittal when the DOM is ready for it to work. The example bellow is providing a success callback, but there are other events you could use, like error, beforeSubmit, and so forth:

$('#contact_form').ajaxForm(function() { 
    alert("Thank you for your data!"); 
});

It supports both regular input values and also file uploads (in older browsers it will fake an ajax file upload using iframes), and if your browser can handle it you can even display a progress bar.

Answer 2

 `if (window.FormData)` 

check this and file must be `

file = $('#elemet').files.

and ajax option should be data: FormData, where formdata = new FormData();