如何解决ajax调用不选择asp点网形式的图片?
我正在开发一个 asp.net 核心应用程序。我想向控制器发送 ajax 请求。我的 ajax 函数如下所示:
我有一个输入供用户上传文件图像/文件。使用我拥有的当前代码,我在添加图像时在控制器上收到 null
。
Ajax 请求:(我有)
$("#submit").click(function (e) {
e.preventDefault();
var data = $("#form1").serialize();
console.log(data);
alert(data);
$.ajax({
type: "post",url: "/Employee/Create",processData: false,data: data,success: function (response) {
alert(response);
}
});
});
表格
<form id="form1" enctype="multipart/form-data">
<div>
//Other fields
</div>
<input class="form-control-file custom-file-input" type="file" asp-for="@Model.ProfileImage">
<button class="btn submitbtn" type="button">Choose file</button>
</form>
我读过我应该设置 contentType: false
但如果我这样做这个控制器接收所有值作为 null
如果我这样做,我得到:data is not defined
$("#submit").click(function (e) {
e.preventDefault();
var formData = new FormData();
$.ajax({
type: "post",data: formData,success: function (response) {
alert(response);
}
});
});
解决方法
我已经读过我应该设置 contentType: false 但如果我这样做这个控制器接收所有值为 null
是的,如果您发布的数据包含文件,则需要设置 contentType: false
。jQuery serialize()
方法将不包含输入文件元素。因此,用户选择的文件不会包含在序列化值中。
您需要创建一个 FormData
对象,将文件附加到该对象,然后将表单字段值也附加到同一个 FormData 对象。您可以简单地遍历所有输入字段并添加它。
这是一个工作演示:
型号:
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Role { get; set; }
[NotMapped]
public IFormFile ProfileImage { get; set; }
}
查看:
@model Employee
<form id="form1" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Role" class="control-label"></label>
<input asp-for="Role" class="form-control" />
<span asp-validation-for="Role" class="text-danger"></span>
</div>
<input type="file" asp-for="@Model.ProfileImage"/>
<div class="form-group">
<input type="button" value="Submit" id="submit" class="btn btn-primary" />
</div>
</form>
视图中的 JS:
@section scripts
{
<script>
$("#submit").click(function (e) {
e.preventDefault();
var fdata = new FormData();
var fileInput = $('#ProfileImage')[0];
var file = fileInput.files[0];
fdata.append("ProfileImage",file);
$("form input[type='text']").each(function (x,y) {
fdata.append($(y).attr("name"),$(y).val());
});
$.ajax({
type: "post",url: "/Employee/Create",contentType: false,//add this...
processData: false,data: fdata,success: function (response) {
alert(response);
}
});
});
</script>
}
控制器:
[HttpPost]
//[ValidateAntiForgeryToken]
public JsonResult Create(Employee employee)
{
return Json(employee);
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。