ASP.Net MVC: Send File from View to Controller using HttpPostedFileBase in jQuery

Please suggest me how to send input type file value (from view) in HttpPostedFileBase ImageFile using jquery.

[HttpPost]
public ActionResult CreateBiodata(UserRegist userDetails)
{
    string filename = Path.GetFileNameWithoutExtension(userDetails.ImageFile.FileName);
    string extention = Path.GetExtension(userDetails.ImageFile.FileName);
    filename = filename + DateTime.Now.ToString("yymmssfff") + extention;
    userDetails.uImage = "~/User_images/" + filename;
    filename = Path.Combine(Server.MapPath("~/User_images/"), filename);
    userDetails.ImageFile.SaveAs(filename);
    using (BiodataEntities1 db = new BiodataEntities1())
    {
        db.UserRegists.Add(userDetails);
        db.SaveChanges();
    }
    return Json(1);
}

namespace Sprint2_BiodataForm.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Web;

    public partial class UserRegist
    {
        public int userId { get; set; }
        public string firstName { get; set; }
        public string lastName { get; set; }
        public string emailId { get; set; }
        public string mobNo { get; set; }
        public string DOB { get; set; }
        public string jobPro { get; set; }
        public string compName { get; set; }
        public string city { get; set; }
        [Display(Name = "Upload Image:")]
        public string uImage { get; set; }
        public HttpPostedFileBase ImageFile { get; set; }
    }
}

@{
ViewBag.Title = "Index";
Layout = null;
}

<h2>Index</h2>

<form>
    <div align="center">
        <h2>Biodata Page</h2>
        <table>
            <tr>
                {
                <td>
                    <label for="ImageFile" align="left">Upload Image:</label></td>
                <td>
                    <input type="file" name="ImageFile" id="ImageFile" />
                </td>
                }
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" name="btnRegister" id="btnRegister" value="Register" />
                </td>
            </tr>

        </table>
    </div>

</form>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>
    $(document).ready(function () {
        $('#btnRegister').click(function () {
            var formdata = {
                firstName: $('#txtfname').val(),
                lastName: $('#txtlname').val(),
                emailId: $('#txtemail').val(),
                mobNo: $('#txtmobno').val(),
                DOB: $('#txtdob').val(),
                jobPro: $('#txtjobpro').val(),
                compName: $('#txtcompname').val(),
                city: $('#txtcity').val(),
                uImage: $('#Imagefile').val()
            };

            $.ajax({
                url: '/Registration/CreateBiodata',
                type: 'POST',
                data: formdata,
                success: function (data) {
                    if (data === 1) {
                        alert('Registration is Done');
                        //window.location.href = "/Employee/Index";
                    }

                },
                error: function (ex) {
                    console.log(ex.responseText);
                }
            })
        })
    })
</script>