本章和大家分享的是.NetCore的MVC框架上传文件的示例，主要讲的内容有：form方式提交上传，ajax上传，ajax提交+上传进度效果，Task并行处理+ajax提交+上传进度，相信当你读完文章内容后能后好的收获，如果可以不妨点个赞；由于昨天电脑没电了，快要写完的内容没有保存，今天早上提前来公司从头开始重新，断电这情况的确让人很头痛啊，不过为了社区的分享环境，这也是值得的，不多说了来进入今天的正篇环节吧；
form方式上传一组图片
先来看看咋们html的代码，这里先简单说下要上传文件必须要设置form元素里面的 enctype="multipart/form-data" 属性和post方式，如果你想要多选上传文件的话，需要把文件type='file'元素设置她的属性multiple='multiple'，因此就有了如下内容：
<form action="/Home/FileUp" method="post" enctype="multipart/form-data"> <input type="file" multiple /> <br /> <button>form上传</button> <br /> <span>@ViewData["MsgBox"]</span> </form>
由于采用form提交，这个测试用例只接用了button元素默认的type=submit来提交表单，对应的后台Action中代码如下：
/// <summary> /// form提交上传 /// </summary> /// <param></param> /// <returns></returns> [HttpPost] public async Task<IActionResult> FileUp(MoUser user) { if (user.MyPhoto == null || user.MyPhoto.Count <= 0) { MsgBox("请上传图片。"); return View(); } //var file = Request.Form.Files; foreach (var file in user.MyPhoto) { var fileName = file.FileName; var contentType = file.ContentType; var len = file.Length; var fileType = new string[] { "image/jpeg", "image/png" }; if (!fileType.Any(b => b.Contains(contentType))) { MsgBox($"只能上传{string.Join(",", fileType)}格式的图片。"); return View(); } if (len > 1024 * 1024 * 4) { MsgBox("上传图片大小只能在4M以下。"); return View(); } var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { await file.CopyToAsync(stream); } } MsgBox($"上传成功"); return View(); }
从前端到后端的Action不得不说这种form表单提交的方式挺简单的，需要注意的是Action这里用的实体模型方式来对应上传的文件信息，这里自定义了MoUser类，通过属性 public List<IFormFile> MyPhoto { get; set; } 来匹配html表单中文件type='file'的name属性名称name="MyPhoto"：
public class MoUser { public int UserId { get; set; } = 1; public string UserName { get; set; } = "神牛步行3"; public List<IFormFile> MyPhoto { get; set; } }
这样就能通过实体模型的方式把上传的文件信息存储在自定义MoUser类中的MyPhoto属性中了；
ajax上传一组图片
这里需要在上面例子中的html处修改一些东西，不再使用form提交，指定了普通button按钮来触发ajax的提交，完整html代码如：
<form method="post" enctype="multipart/form-data"> <input type="file" multiple /> <br /> <button type="button">ajax上传</button> <br /> <span></span> </form>
有了布局，再来看看具体的js实现代码，这里我采用jquery的ajax提交的方法来操作，也用到了html5新增的FormData来存储表单的数据：
$("#btnAjax").on("click", function () { var msg = $("#span01"); var form = document.getElementById("form01"); //console.log(form); var data = new FormData(form); $.ajax({ type: "POST", url: "/home/AjaxFileUp", data: data, contentType: false, processData: false, success: function (data) { if (data) { msg.html(data.msg); } }, error: function () { msg.html("上传文件异常,请稍后重试！"); } }); });
至于后台Action的方法和示例一的相差不大，关键点在于这里我直接使用 Request.Form.Files 方式来获取上传的所有文件，不再使用实体模型的方式了，这样测试用例更多样化吧：
/// <summary> /// ajax无上传进度效果上传 /// </summary> /// <returns></returns> [HttpPost] public async Task<JsonResult> AjaxFileUp() { var data = new MoData { Msg = "上传失败" }; try { var files = Request.Form.Files.Where(b => b.Name == "MyPhoto01"); //非空限制 if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return Json(data); } //格式限制 var allowType = new string[] { "image/jpeg", "image/png" }; if (files.Any(b => !allowType.Contains(b.ContentType))) { data.Msg = $"只能上传{string.Join(",", allowType)}格式的文件。"; return Json(data); } //大小限制 if (files.Sum(b => b.Length) >= 1024 * 1024 * 4) { data.Msg = "上传文件的总大小只能在4M以下。"; return Json(data); } //写入服务器磁盘 foreach (var file in files) { var fileName = file.FileName; var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { await file.CopyToAsync(stream); } } data.Msg = "上传成功"; data.Status = 2; } catch (Exception ex) { data.Msg = ex.Message; } return Json(data); }
如果你有耐心读到这里，那么后面的内容个人感觉对你开发会有好的帮助，不负你期待；
ajax提交+上传进度+一组图片上传
同样我们先来看对应的html代码，其实和示例2几乎一样，只是把名称变动了下：