本章和大家分享的是.NetCore的MVC框架上传文件的示例，主要讲的内容有：form方式提交上传，ajax上传，ajax提交+上传进度效果，Task并行处理+ajax提交+上传进度，相信当你读完文章内容后能后好的收获，如果可以不妨点个赞；由于昨天电脑没电了，快要写完的内容没有保存，今天早上提前来公司从头开始重新，断电这情况的确让人很头痛啊，不过为了社区的分享环境，这也是值得的，不多说了来进入今天的正篇环节吧；

先来看看咋们html的代码，这里先简单说下要上传文件必须要设置form元素里面的  属性和post方式，如果你想要多选上传文件的话，需要把文件type='file'元素设置她的属性multiple='multiple'，因此就有了如下内容：

action=method=enctype=> name==multiple /> 4 <br /> >form上传</button> 6 <br /> >@ViewData[]</span> 8 </form>

由于采用form提交，这个测试用例只接用了button元素默认的type=submit来提交表单，对应的后台Action中代码如下：

form提交上传 [HttpPost] Task<IActionResult> FileUp(MoUser user) 8 { ); return View(); } (var file in user.MyPhoto) 12 { 13 var fileName = file.FileName; 14 var contentType = file.ContentType; 15 var len = file.Length; fileType = , }; ,); return View(); } (len > ); return View(); } path = Path.Combine(, fileName); 23 using (var stream = System.IO.File.Create(path)) 24 { 25 await file.CopyToAsync(stream); 26 } 27 } ); View(); 31 }

从前端到后端的Action不得不说这种form表单提交的方式挺简单的，需要注意的是Action这里用的实体模型方式来对应上传的文件信息，这里自定义了MoUser类，通过属性 public List<IFormFile> MyPhoto { get; set; } 来匹配html表单中文件type='file'的name属性名称name="MyPhoto"：

MoUser 2 { UserId { get; set; } = 1; UserName { ; List<IFormFile> MyPhoto { get; set; } 7 }

这样就能通过实体模型的方式把上传的文件信息存储在自定义MoUser类中的MyPhoto属性中了；

这里需要在上面例子中的html处修改一些东西，不再使用form提交，指定了普通button按钮来触发ajax的提交，完整html代码如：

id=method=enctype=> name==multiple /> 4 <br /> id==>ajax上传</button> 6 <br /> id=></span> 8 </form>

有了布局，再来看看具体的js实现代码，这里我采用jquery的ajax提交的方法来操作，也用到了html5新增的FormData来存储表单的数据：

).on(, function () { ); ); data = new FormData(form); 6 7 $.ajax({ , , 10 data: data, 11 12 contentType: false, 13 processData: false, 14 success: function (data) { 15 if (data) { 16 msg.html(data.msg); 17 } 18 }, 19 error: function () { ); 21 } 22 }); 23 });

至于后台Action的方法和示例一的相差不大，关键点在于这里我直接使用 Request.Form.Files 方式来获取上传的所有文件，不再使用实体模型的方式了，这样测试用例更多样化吧：

ajax无上传进度效果上传 [HttpPost] Task<JsonResult> AjaxFileUp() 7 { }; { ); (files == ; return Json(data); } allowType = , }; 17 if (files.Any(b => !allowType.Contains(b.ContentType))) 18 { ,; 20 return Json(data); 21 } (files.Sum(b => b.Length) >= 1024 * 1024 * 4) 25 { ; return Json(data); 27 } (var file in files) 31 { fileName = file.FileName; , fileName); 35 using (var stream = System.IO.File.Create(path)) 36 { 37 await file.CopyToAsync(stream); 38 } 39 } ; 41 data.Status = 2; 42 43 } 44 catch (Exception ex) 45 { 46 data.Msg = ex.Message; 47 } 48 return Json(data); 49 }

如果你有耐心读到这里，那么后面的内容个人感觉对你开发会有好的帮助，不负你期待；

同样我们先来看对应的html代码，其实和示例2几乎一样，只是把名称变动了下：