Uploading a file with ajax serialize() does not work?

This was driving me nuts as I often use Ajax to save different data without refreshing the page, however when I tried to use it for a multipart form when uploading an image, it would not work.

After a bit of searching I found this solution which worked for me.

The form:

<form class="form-inline" id="imageUpload" enctype="multipart/form-data">
    <div class="form-group" >
        <label for="file">Select image to upload:</label>
        <input type="file" name="file" id="file" >
     </div>
     <button type="submit" class="btn btn-primary">Upload Image</button>
</form>

The ajax:

<script type="text/javascript">
    $(document).ready(function() {
        $("#imageUpload").submit(function(e) {
            e.preventDefault();

            var formData = new FormData(this);

            $.ajax({
                type: "POST",
                data: formData,
                cache:false,
                contentType: false,
                processData: false,
                url: "/activity/add/photo",
                dataType: "json",
                success: function(data) {
                    $('#imagedisplay').html(data.name);
                },
                error: function() {
                    $('#imageerror').html('data.file');         
                }
            });
        });
    });
</script>