Uploading file in twitter bootstrap modal from

Question

I've implemented some code to add crud operations in to the my mvc application. My part of view for editing items:

<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>
@foreach (var p in @Model.Photos)
{
    <div class="pull-right">
        @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-star'></span>", "Add", "Create", "Photo"
            , new { id = p.PhotoId }
            , new { data_modal = "", @class = "btn btn-danger" })
}

modalform.js script for handling buttons:

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
            /*backdrop: 'static',*/
                keyboard: true
            }, 'show');
            bindForm(this);
        });
        return false;
    });
});
function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $('#progress').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#progress').hide();
                    location.reload();
                } else {
                    $('#progress').hide();
                    $('#myModalContent').html(result);
                    bindForm(dialog);
                }
            }
        });
        return false;
    });
}

Now I want to add uploading image function to my partial views. I edited my partial views and read some information about js uploading files. I know I need to replace $(this).serialize() to the FormData($('form-group').get(0)). But I have no idea how to merge form data with another fields. Could someone help me to do this? Below shown one of my partial view:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        <div class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(m => Model.Name, new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control required"})
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Description, new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.TextBoxFor(m => m.Description, new { @class = "form-control required"})
                </div>
           </div>
        <div class="form-group" enctype="multipart/form-data">
            <div style="position:relative;">
                <label>Image</label>
                <a class='btn' href='javascript:;'>
                    Choose the faile...
                    <input type="file" name="Image" size="40"
                           style="position:absolute;z-index:2;top:0;
                                    left:0; filter: alpha(opacity=0); opacity:0;
                                    background-color:transparent;color:transparent;"
                       onchange='$("#upload-file-info").html($(this).val());'>
                </a>
            <span class='label label-info' id="upload-file-info"></span>
        </div>
        @if (Model.ImageData == null)
        {
            <div class="form-control-static">No image</div>
        }
        else
        {
            <img class="img-thumbnail" width="150" height="150"
                 src="@Url.Action("GetImage", "Photo",
                        new { Model.UserId })" />
        }
            </div>
            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <h3>
                        <span class="label label-success">
                        Are you sure to create this photo?
                        </span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">No</button>
        <input class="btn btn-success" type="submit" value="Yes" />
    </div>

I want to get HttpPostedFileBase object in my controller. Right now it is always null. Thanks very much if you help me!