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場的形式。
可能重複[如何異步上傳文件?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – pwas
請閱讀整個問題。像你一樣提供,他們使用FormData發送通過ajax,我想發送使用form.serialize(),他們建議一些準備好的插件文件,並希望,他們只指出一個圖像領域,意味着整個形式。 –
參考[這個答案](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));'將包括文件輸入的整個表單序列化 - 不需要逐個追加它們。 –