在 MVC 中使用 JQuery ajax form.serialize() 发送 HttpPostedFileBase 字段

Question

我正在开发 MVC project.I 有如下形式：

<div id="horizontal-form">
            @using (Html.BeginForm("Send", "Ticket", FormMethod.Post, new
            {
                @class = "form-horizontal",
                role = "form",
                id = "form_send_ticket",
                enctype = "multipart/form-data"
            }))
            {

                @**** I have about 20 filed's of other types here ****@
                 ......

                @**** Image file ****@
                @Html.TextBoxFor(x => x.Image, new { type = "file" })


                <div>
                    <button type="button" class="btn btn-success" id="send_ticket">Insert</button>
                </div>
            }

 </div>

我的视图模型：

  public class SendViewModel
{
    //I have about 20 filed's of other types here
    .....

    //Image file
    public HttpPostedFileBase Image { get; set; }

}

我的JQueryajax:

   $("#send_ticket").click(function () {
        var form = $("#form_send_ticket");

        $.ajax({
            type: "POST",
            url: '@Url.Action("Send", "Ticket")',
            data: form.serialize(),
            contentType: "multipart/form-data",
            success: function (data) {
                //do something
            },
            error: function (e) {
               //do something
            }
        });
    })

我的控制器动作是这样的：

 [HttpPost]
    public ActionResult Send(SendViewModel ticket)
    {
       //Do something
       return Json(new { });

    }

在我遇到这种情况之前，我的意思是在其他项目中，大多数情况下我有大约 3 到 8 个字段，包括图像文件和一些其他类型，我将它们一个一个地附加到 FormData（因为那个图像文件）然后通过 ajax 请求发送它们，这对我来说无关紧要，但现在我有大约 22 个字段，但做起来有点困难 this.so 我决定序列化表格并通过 ajax 请求，它在所有文件中都运行良好，除了图像，我在 ViewModel 中将其设为 HttpPostedFileBase 类型。知道如何使用 data: form.serialize() 发送此字段吗？

感谢您的帮助:)

更新：让我澄清几点：

1-我不想 FormData 通过 ajax 发送，我想使用 form.serialize().

发送

2-不想使用现成的文件插件。

3-我指的不是只有一个图像字段，我的意思是整个表格有 23 个字段。

Answer 1

你不能post/upload使用jQueryAjax的文件，除非你要使用FormData或一些插件在内部使用 iFrame 实现。

在 MVC 中使用 JQuery ajax form.serialize() 发送 HttpPostedFileBase 字段

Sending HttpPostedFileBase field using JQuery ajax form.serialize() in MVC

c#

ajax

asp.net-mvc

jquery

httppostedfilebase