[英]MVC5 - How to pass fileupload along with model to controller using jquery ajax
I need to pass my upload file to my controller using jquery ajax.我需要使用 jquery ajax 将我的上传文件传递给我的控制器。
JS: JS:
$('#btnpopupreg').click(function () {
$.ajax({
type: 'POST',
url: '/Membership/Register',
data: $('#frmRegister').serializeArray(),
dataType: 'json',
headers: fnGetToken(),
beforeSend: function (xhr) {
},
success: function (data) {
//do something
},
error: function (xhr) {
}
})
})
View:看法:
@model Test.RegisterViewModel
@{
using Html.BeginForm(Nothing, Nothing, FormMethod.Post, New With {.id = "frmPopUpRegister", .enctype = "multipart/form-data"})
}
<input type="file" />
//rest of my strongly typed model here
<input type="button" value="BUTTON" />
//rest of the code here
Controller:控制器:
[HttpPost()]
[AllowAnonymous()]
[ValidateAntiForgeryToken()]
public void Register(RegisterViewModel model)
{
if (Request.Files.Count > 0) { //always 0
}
if (ModelState.IsValid) {
//do something with model
}
}
I can get the model value just fine but Request.Files always returns null.我可以很好地获得模型值,但 Request.Files 总是返回 null。 I also tried using HttpPostedFileBase but it also always return null我也尝试使用 HttpPostedFileBase 但它也总是返回 null
[HttpPost()]
[AllowAnonymous()]
[ValidateAntiForgeryToken()]
public void Register(RegisterViewModel model, HttpPostedFileBase files)
{
//files always null
if (ModelState.IsValid) {
//do something with model
}
}
First you need to give you file control a name
attribute so it can post back a value to your controller首先,您需要为文件控件提供一个name
属性,以便它可以向您的控制器回发一个值
<input type="file" name="files" /> //
Then serialize your form and the associated file(s)然后序列化您的表单和相关文件
var formdata = new FormData($('form').get(0));
and post back with并回贴
$.ajax({
url: '@Url.Action("Register", "Membership")',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function (data) {
....
}
});
Note also the file input needs to be inside the form tags还要注意文件输入需要在表单标签内
You need to use FormData
with combination of contentType, processData setting to false:您需要将FormData
与 contentType、processData 设置为 false 结合使用:
var formData = new FormData();
formData.append("userfile", $('#frmRegister input[type="file"]')[0].files[0]);
// append the file in the form data
$.ajax({
type: 'POST',
url: '/Membership/Register',
data: formdata, // send it here
dataType: 'json',
contentType:false, // this
processData:false, // and this should be false in case of uploading files
headers: fnGetToken(),
beforeSend: function(xhr) {
},
success: function(data) {
//do something
},
error: function(xhr) {
}
})
<input type="file" id="LogoImage" name="image" />
<script>
var formData = new FormData($('#frmAddHotelMaster').get(0));
var file = document.getElementById("LogoImage").files[0];
formData.append("file", file);
$.ajax({
type: "POST",
url: '/HotelMaster/SaveHotel',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
swal({
title: "Good job!",
text: "Data Save successfully!",
type: "success"
});
$('#wrapper').empty();
$('#wrapper').append(htmlData);
},
error: function (error) {
alert("errror");
}
});
</script>
public ActionResult SaveHotel(HotelMasterModel viewModel, HttpPostedFileBase file)
{
for (int i = 0; i < Request.Files.Count; i++)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
file.SaveAs(path);
}
return View();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.