使用 ajax 和 mvc 提交带有照片数据的表单

Question

我正在尝试使用 ajax 提交我的表单，因为当我提交表单时页面重新加载的典型方式并且我忘记了选择了哪些单选按钮。

我尝试了几种方法，但这个方法似乎是最有希望的。当我使用 JQuery 抓取元素时，我从表单中序列化数据，然后向我的控制器发送一个帖子，但是当我使用此方法时，我上传的 ImageFile 总是返回 null，任何帮助将不胜感激！

照片类：

namespace MVCEventCalendar
{
    using System;
    using System.Collections.Generic;

    public partial class Photo
    {
        public string Path { get; set; }
        public string SubEvent { get; set; }
        public int EventID { get; set; }
        public int ID { get; set; }

        public System.Web.HttpPostedFileBase ImageFile { get; set; }
    }
}

控制器：

[HttpPost]
public JsonResult AddInspectionPhoto(Photo imagemodel)
{
    string fileName = Path.GetFileNameWithoutExtension(imagemodel.ImageFile.FileName);
    string extension = Path.GetExtension(imagemodel.ImageFile.FileName);
    fileName = fileName + "_" + imagemodel.EventID + "_" + imagemodel.SubEvent;
    imagemodel.Path = "../InspectionPhotos/" + fileName + "." +extension;
    fileName = Path.Combine(Server.MapPath("../InspectionPhotos/"), fileName + extension);
    imagemodel.ImageFile.SaveAs(fileName);

    using (InspectionPhotoEntities db = new InspectionPhotoEntities())
    {
        imagemodel.EventID = Convert.ToInt32(Session["Event"].ToString());
        imagemodel.SubEvent = "GC1";
        db.Photos.Add(imagemodel);
        db.SaveChanges();
    }
    //ModelState.Clear();
    var status = true;
    return new JsonResult { Data = new { status = status } };
    //return View("~/Views/Home/InspectionChecklist.cshtml");
}

HTML：

   <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><span id="eventTitle">Upload a Photo!</span></h4>
                </div>
                <div class="modal-body">

                    <form asp-controller="Home" asp-action="AddInspectionPhoto" method="post" id="photoform" role="form">

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align:center;">
                                    <input type="file" name="ImageFile" id="imageFile" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12" style="text-align:center;">
                                    <button type="button" style="background-color: #454545; color: #ffffff;" class="btn btn-default" id="submitPhoto">Submit Photo</button>
                                </div>
                            </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

JQuery:

        $('body').on('click', '#submitPhoto', function () {

            //var filePath = $('#imageFile').filePath;

            //var imageJSON = {
            //    SubEvent: SubEvent,
            //    ImageFile: filePath
            //}


            //UploadPhoto(imageJSON);
            console.log("submittingform");
                var $form = $('photoform');

                $.ajax({
                    type: "POST",
                    url: '/home/AddInspectionPhoto',
                    data: $form.serialize(),
                    error: function (xhr, status, error) {
                        //do something about the error
                    },
                    success: function (response) {
                        //do something with response
                        //LoadBooks();
                        console.log("DONEEEE");
                    }
                });

                return false;// if it's a link to prevent post



        });

这里一定有什么我遗漏的东西，可能是序列化数据或我发送照片的方式吗？

Answer 1

serialize() 不适用于文件输入，您需要使用 FormData 对象并阻止 jQuery.ajax 设置内容类型和处理您传递的数据

            $.ajax({
                type: "POST",
                url: '/home/AddInspectionPhoto',
                data: new FormData($form[0]),
                contentType: false,
                processData: false,
                error: function (xhr, status, error) {
                    //do something about the error
                },
                success: function (response) {
                    //do something with response
                    //LoadBooks();
                    console.log("DONEEEE");
                }
            });