在MVC

2016-03-30 38 views
1
發送使用JQuery AJAX form.serialize()HttpPostedFileBase場

我工作的MVC project.I有一個表格象下面這樣:在MVC

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

} 

我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 
      } 
     }); 
    }) 

我控制器操作是這樣的:

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

    } 

之前,這種情況我遇到,我的意思是在其它項目中,主要是我有大約3到8場的包括圖像文件的一些其他類型的,我追加逐一到FormData(因爲圖像文件),然後發送他們通過ajax請求,這對我來說無關緊要,但是現在我有大約22個字段,儘管如此,我還是決定序列化表單並通過ajax請求發送它,並且它在所有字段中運行良好,除了Image我在ViewModel中將其設置爲HttpPostedFileBase。任何想法如何使用data: form.serialize()以表格形式發送此字段?

感謝您的幫助:)

更新: 讓我清楚了一些問題的:

1 - 我不想FormData通過Ajax來發送和我想用form.serialize()發送。

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

3 - 我不是說只有一個圖像場,我的意思是整個23場的形式。

+0

可能重複[如何異步上傳文件?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – pwas

+1

請閱讀整個問題。像你一樣提供,他們使用FormData發送通過ajax,我想發送使用form.serialize(),他們建議一些準備好的插件文件,並希望,他們只指出一個圖像領域,意味着整個形式。 –

+1

參考[這個答案](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681 ) - 它簡單的'var formdata = new FormData($('form')。get(0));'將包括文件輸入的整個表單序列化 - 不需要逐個追加它們。 –

回答

0

不能後/上傳使用jQuery的Ajax文件,除非你要使用FormData或一些插件,其內部使用iFrame實現。