Fail to attach file while using ajax serialize

Question

I have a "Contact Us" form and it was working fine but now, in trying to stop the page from reloading, I had to use ajax. The form is serializing but now I am unable to add any attachment files.

The code I'm using is given below. Any help would be appreciated.

<div id="respond" class="comment-respond">
@model Umbraco.AddingValues.Web.Model.ContactUs

 @using (Html.BeginUmbracoForm("Contact", "ContactUsSurface", FormMethod.Post, new { @class =  "contact-form", @id ="myForm", @enctype="multipart/form-data"} ))
{ 
  @Html.ValidationSummary(true)

<div id="form">
    <div class="comment-form-author">
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
    @Html.ValidationMessageFor(x => x.Name)
     </div>
     <div class="comment-form-author">
     @Html.LabelFor(x => x.Company)
    @Html.TextBoxFor(x => x.Company)
    @Html.ValidationMessageFor(x => x.Company)
      </div>
      <div class="comment-form-email">
    @Html.LabelFor(x => x.EmailFrom, "Email")
    @Html.TextBoxFor(x => x.EmailFrom)
    @Html.ValidationMessageFor(x => x.EmailFrom,"Please enter a valid Email Address")
      </div>
     <div class="comment-form-author">
    @Html.LabelFor(x => x.Tel)
    @Html.TextBoxFor(x => x.Tel)
    @Html.ValidationMessageFor(x => x.Tel)
         </div>
       <div class="comment-form-url">
    @Html.LabelFor(x => x.Intrested)
    @Html.TextBoxFor(x => x.Intrested)
    @Html.ValidationMessageFor(x => x.Intrested)
      </div>
     <div class="comment-form-comment" >
    @Html.LabelFor(x => x.Message)
    @Html.TextAreaFor(x => x.Message)
    @Html.ValidationMessageFor(x => x.Message)
       </div>

     </div>

    <div class="forms-button" id="submitbutton">
    <input id="submit" class="button" name="submit" type="button" value="submit"   onclick="submitSearchForm_ajax('myForm', 'message')"/>

    <div class="fileUpload ">

           @* <input type="file" class="upload" />*@

         <input type="file" name="attachment" id="attachment" class="upload" value ="Upload" /> 

    </div>

  <div id="message" style="display:none">
    <br />
    <div style="margin-top:10px">
    <h2>Thank You! Your message has been recieved.</h2>
 </div>
     </div>
  </div>  
   }
  </div>

And here is the script I am using:

    function submitSearchForm_ajax(formid, updateDivid) {

    var form = $("#" + formid);
    //var formData = new FormData($('myForm')[0]);
    $('#message').css('display', 'none');
    //var formData = new FormData($('#myForm')[0]);
    $.ajax({
        url: form.attr("action"),
        //data: form.serialize() ,
        data: form.serialize(),
        type: 'POST',
        success: function (message) {

            $('#message').css('display', 'block');
            if (message == "Failed") {
                $('#message').html('Error submitting form.');
            }
            else {
                $('#message').html(message);
                $("#form :input[type='text']").val('');
            }
        }
    })
}