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

Question

I'm working on an MVC project.I have a form Like below:

<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>

My ViewModel:

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

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

}

My JQuery ajax:

   $("#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
            }
        });
    })

My Controller Action is like this:

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

    }

Before this situation I faced,I mean in other projects,mostly I had about 3 to 8 field's including image file an some other types and I append them one by one to FormData(because of that Image file) then send them through ajax request and it was no matter for me,but now I have about 22 field's and it's a little though to do this.so I decided to serialize the form and send it through ajax request and it's working good form all filed's except Image which I make it the type HttpPostedFileBase in ViewModel. Any Idea how to send this field with form using data: form.serialize()?

appreciate your help :)

Update: let me clear some point's:

1-I don't want FormData to send through ajax and I want to send using form.serialize().

2-Don't want to use ready file plugins.

3-I don't mean just one image field ,I mean whole the form with 23 field's.

Possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — pwas, Mar 30 '16 at 19:25
Please read the whole question.The like you provided,they used FormData to send through ajax and I want to send using form.serialize() ,they suggested some ready plugins files for and do want to ,They pointed just one image field and mean whole the form. — fbarikzehy, Mar 30 '16 at 19:36
Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) - its simply `var formdata = new FormData($('form').get(0));` to serialize your whole form including file inputs - you do not need to append them one by one. — , Mar 30 '16 at 23:03

score 0 · Accepted Answer · answered Mar 30 '16 at 19:52

0

You cannot post/upload a file using jQuery Ajax, unless you are going to use FormData or some plugins which internally use iFrame implementations.

answered Mar 30 '16 at 19:52

ssilas777

9,672
4
45
68

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

1 Answers1