这里下面有两种 第一种是form表单里面添加了数据,并且含有上传的图片,第二种是from表单中不含有图片 只有普通数据
第一种form表单中包含有图片的类型:
如上可以看到 这里有一个form表单 enctype="multipart/form-data" 是用来表示表单可以上传文件/图片类型 这里最后是将所有的数据一起发送到服务器的
我的ajax是这么写的
function addBanner() {
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
url: '/Admin/Banner/AddBanner',
data: formData,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}
这里就整个将form表单的数据拿到并且发送到后台 下面是后台接收数据的写法
public async Task
{
var files = collection.Files;
if (files.Count > 0)
{
string absolutePath = "wwwroot/BannerPic/";
string[] fileTypes = { ".gif", ".jpg", ".jpeg", ".png", ".bmp" };
string extension = Path.GetExtension(files[0].FileName);
if (fileTypes.Contains(extension.ToLower()))
{
if (!Directory.Exists(absolutePath))
{
Directory.CreateDirectory(absolutePath);
}
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + extension;
var filePath = Path.GetFullPath(absolutePath + "\\" + fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await files[0].CopyToAsync(stream);
}
banner.Image = "/BannerPic/" + fileName;
//https://localhost:44395/BannerPic/20200203232630.jpg
return Json(_bannerService.AddBanner(banner));
}
else
{
return Json(new ResPonseModel { code = 0, result = "上传图片格式不正确" });
}
}
else
{
return Json(new ResPonseModel { code = 0, result = "请上传图片文件" });
}
}
这里的写法中 AddBanner banner, IFormCollection collection
AddBanner是要映射的模型 .net是可以自动映射 IFormCollection 是接收的图片/文件
第二种 简单的form表单 只有普通数据
如下是html表单
接下来是js的写法 如何发送数据到服务器
function add() {
var data = $("#addForm").serialize();
//alert(data);
$.ajax({
type: 'post',
async: false,
url: '/Admin/News/Addclassify',
data: data,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}
重点就在于这里只有form表单中的name属性和后台model类型的属性一一对应 那么.net就可以实现在动映射
这里是直接拿到表单数据 然后直接序列化 传入后台就ok
服务器端的写法:
[HttpPost]
public JsonResult Addclassify(AddNewsClassify addNewsClassify)
{
if (string.IsNullOrEmpty(addNewsClassify.Name))
{
return Json(new ResPonseModel { code = 0, result = "请输入新闻类别名称" });
}
return Json(_newsService.AddNewsClassify(addNewsClassify));
}
做这个记录主要是因为自己以前一直很傻很傻的form表单只知道用jquery的方法一个一个的去获取数据 所以写下来