用ajax MVC上传图像

I'm having issue creating new object into my database when I'm trying to include image within it.

My model:

    public Dog()

    {

    public int Id { get; set; }
    public string Name { get; set; }
    public string DogImageUrl { get; set; }

    }

my HTML code:

 @if (User.Identity.IsAuthenticated)
    {
          <h7>New Dog</h7>
            <input id="dogName" type="text" placeholder="dog name" />

                <input type="file" name="file" style="width: 100%;" />

                <input id="createNewDog" type="button" value="Go" />


            </div>
        </div>
    }

My Ajax post code: $('#addNewDog').click(function (e) {

         var imgToUpload = $("input[name=file]").get(0).files[0];
         var data = {
                "Name": $('#dogName').val(),
                "DogImageUrl ": "nullForNow",


            };
            var url = "@Url.Action("NewDog", "Home")";
            $.ajax({
                url: url,
                data: { model: data, file: Request.File[imgToUpload] },
                cache: false,
                type: "POST",
                contentType: "multipart/form-data",
                processData: false,
                success: function (respone) {
                    alert(respone);
                    location.reload();
                },
                error: function (reponse) {
                    alert(reponse);
                }
            });
            e.stopPropagation();
        });

my controller:

 public ActionResult NewDog(Dog model, HttpPostedFileBase file)
    {


        using (var contex = new DogContext())
        {
            if (User.Identity.IsAuthenticated)
            {

                if (file != null)
                {
                    try
                    {
                        if (file.ContentType == "image/jpeg")
                        {
                            if (file.ContentLength < 500000)
                            {
                                string pic = System.IO.Path.GetFileName(file.FileName);
                                string path = System.IO.Path.Combine(
                                                       Server.MapPath("~/Content/GroupImages"), pic);
                                // file is uploaded
                                file.SaveAs(path);
                                model.DogImageUrl = path;
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        return Content(ex.ToString());
                    }
                }

                contex.Dogs.Add(model);
                contex.SaveChanges();
            }
        }

My img always comes null.. I searched all over the internet and didn't figure it out. the goal is to save the PATH to my image in my database.

First you define your model

public class DogUpload
{
    public int Id { get; set; }
    public string Name { get; set; }
    public HttpPostedFileBase Image { get; set; }
}

Then your action

[HttpPost]
public ActionResult Upload(DogUpload model)
{
    var image = model.Image;
    var name = model.Name;
    var fileName = image.FileName;

    var path = Server.MapPath("~/Content/GroupImages" + fileName);
    image.SaveAs(path);

    // create valid url to dog image
    // create Dog and save to database
    var dog = dbContext.Dogs.FirstOrDefault(d => d.Id == model.Id);
    if (dog == null)
    {
       dog = new Dog
       {
           Name = model.Name,
           DogImageUrl = url
       };
       ...
    }

    return Json(new { message = "Created", id = dog.Id, name = dog.Name, url = dog.DogImageUrl });
}

Your view

@using(Html.BeginForm("Upload", "Dog", FormMethod.Post,
       new { id="dogForm", enctype="multipart/form-data" })
{
    <input type="file" name="Image" />
    <input type="text" name="Name" />
    <button type="submit">Submit</button>
}

The AJAX

$("#dogForm").on("submit", function(e) {
    e.preventDefault();

    var form = $(this);
    var formData = new FormData(form.get(0));

    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),
        data: formData,
        processData: false,
        contentType: false
    })
    .then(function(result) {
        console.log(result);
    });
});