.NetCore完成上传多文件的示例详解【C#.Net教程】,.netcore,上传多文件

本章和人人分享的是.NetCore的MVC框架上传文件的示例，主要讲的内容有：form体式格局提交上传，ajax上传，ajax提交+上传进度效果，Task并行处置惩罚+ajax提交+上传进度，对人人非常有协助，感兴趣的朋侪追随小编一同进修吧

本章和人人分享的是.NetCore的MVC框架上传文件的示例，主要讲的内容有：form体式格局提交上传，ajax上传，ajax提交+上传进度效果，Task并行处置惩罚+ajax提交+上传进度，置信当你读完文章内容后能后好的收成，假如可以无妨点个赞；因为昨天电脑没电了，将近写完的内容没有保留，本日早上提前来公司从头开始从新，断电这状况确实让人很头痛啊，不过为了社区的分享环境，这也是值得的，不多说了来进入本日的正篇环节吧；

form体式格局上传一组图片

先来看看咋们html的代码，这里先简朴说下要上传文件必需要设置form元素内里的 enctype="multipart/form-data" 属性和post体式格局，假如你想要多选上传文件的话，须要把文件type='file'元素设置她的属性multiple='multiple'，因而就有了以下内容：

<form class="form-horizontal" action="/Home/FileUp" method="post" enctype="multipart/form-data">
  <input type="file" name="MyPhoto" class="form-control" multiple />
  <br />
  <button class="btn btn-default">form上传</button>
  <br />
  <span style="color:red">@ViewData["MsgBox"]</span>
  </form>

因为采纳form提交，这个测试用例只接用了button元素默许的type=submit来提交表单，对应的背景Action中代码以下：

/// <summary>
 /// form提交上传
 /// </summary>
 /// <param name="user"></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 class="form-horizontal" id="form01" method="post" enctype="multipart/form-data">
  <input type="file" name="MyPhoto01" class="form-control" multiple />
  <br />
  <button type="button" id="btnAjax" class="btn btn-default">ajax上传</button>
  <br />
  <span style="color:red" id="span01"></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险些一样，只是把称号变动了下：

<form class="form-horizontal" id="form02" method="post" enctype="multipart/form-data">
  <input type="file" name="MyPhoto02" class="form-control" multiple />
  <br />
  <button type="button" id="btnAjax02" class="btn btn-default">ajax上传进度效果上传</button>
  <br />
  <span style="color:red" id="span02"></span>
  </form>

要加一个进度效果，须要用到js的定时器，定时猎取上传文件的上传进度数据信息，因而这里经由过程js的setInterval要领来定时要求一个进度数据接口，注重用完以后须要消灭这个定时器，不然一向再不停要求您接口：

 $("#btnAjax02").on("click", function () {
  var interBar;
  var msg = $("#span02");
  msg.html("上传中，请稍后...");
  var form = document.getElementById("form02");
  //console.log(form);
  var data = new FormData(form);
  $.ajax({
   type: "POST",
   url: "/home/AjaxFileUp02",
   data: data,
   contentType: false,
   processData: false,
   success: function (data) {
   if (data) {
    msg.html(data.msg);
    //消灭进度查询
    if (interBar) { clearInterval(interBar); }
   }
   },
   error: function () {
   msg.html("上传文件非常,请稍后重试！");
   if (interBar) { clearInterval(interBar); }
   }
  });
  //猎取进度
  interBar = setInterval(function () {
   $.post("/home/ProgresBar02", function (data) {
   if (data) {
    var isClearVal = true;
    var strArr = [];
    $.each(data, function (i, item) {
    strArr.push('文件：' + item.fileName + ",当前上传：" + item.percentBar + '<br/>');
    if (item.status != 2) { isClearVal = false; }
    });
    msg.html(strArr.join(''));
    if (isClearVal) {
    if (interBar) { clearInterval(interBar); }
    }
   }
   });
  }, 200);
  });

既然上面说到零丁的进度数据接口，那末我们除了上传Action外，也须要进度的Action，而这进度Action获得的上传文件数据信息必需和上传的Action一向，因而就须要用到缓存等存储数据的体式格局，这里我用的是MemoryCache的体式格局，对已netcore来讲仅仅只须要在肇端文件（如：Startup.cs）中增添组件效劳：

 public void ConfigureServices(IServiceCollection services)
  {
  // Add framework services.
  services.AddMvc();
 
  //增添cache支撑
  services.AddDistributedMemoryCache();
 }

然后经由过程组织函数注入到对应的接口Controller中去：

  readonly IMemoryCache _cache;
 public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache)
 {  this._options = options.Value;
  _logger = logger;
  _cache = cache; 
 }

到此我们就可以应用cache来存储我们上传进度信息了，来看下处置惩罚上传的Action：

private string cacheKey = "UserId_UpFile";
 private string cacheKey03 = "UserId_UpFile03";
 /// <summary>
 /// ajax上传进度效果上传
 /// </summary>
 /// <returns></returns>
 [HttpPost]
 public async Task<JsonResult> AjaxFileUp02()
 {
  var data = new MoData { Msg = "上传失利" };
  try
  {
  var files = Request.Form.Files.Where(b => b.Name == "MyPhoto02");
  //非空限定
  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);
  }
  //初始化上传多个文件的Bar，存储到缓存中，轻易猎取上传进度
  var listBar = new List<MoBar>();
  files.ToList().ForEach(b =>
  {
   listBar.Add(new MoBar
   {
   FileName = b.FileName,
   Status = 1,
   CurrBar = 0,
   TotalBar = b.Length
   });
  });
  _cache.Set<List<MoBar>>(cacheKey, listBar);
  //写入效劳器磁盘
  foreach (var file in files)
  {
   //总大小
   var totalSize = file.Length;
   //初始化每次读取大小
   var readSize = 1024L;
   var bt = new byte[totalSize > readSize ? readSize : totalSize];
   //当前已读取的大小
   var currentSize = 0L;
   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);
   //进度条处置惩罚流程
   using (var inputStream = file.OpenReadStream())
   {
    //读取上传文件流
    while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0)
    {
    //当前读取的长度
    currentSize += bt.Length;
    //写入上传流到效劳器文件中
    await stream.WriteAsync(bt, 0, bt.Length);
    //猎取每次读取的大小
    readSize = currentSize + readSize <= totalSize ?
     readSize :
     totalSize - currentSize;
    //从新设置
    bt = new byte[readSize];
    //设置当前上传的文件进度，并从新缓存到进度缓存中
    var bars = _cache.Get<List<MoBar>>(cacheKey);
    var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
    currBar.CurrBar = currentSize;
    currBar.Status = currentSize >= totalSize ? 2 : 1;
    _cache.Set<List<MoBar>>(cacheKey, bars);
    System.Threading.Thread.Sleep(1000 * 1);
    }
   }
   }
  }
  data.Msg = "上传完成";
  data.Status = 2;
  }
  catch (Exception ex)
  {
  data.Msg = ex.Message;
  }
  return Json(data);
 }

代码一会儿就变多了，实在根据逻辑来讲增添了存储进度的Cache，和一一读取上传文件流的逻辑罢了，细致人人可以细致看下代码，都有备注申明；再来就是咋们的进度信息Action接口：

[HttpPost]
  public JsonResult ProgresBar02()
  {
   var bars = new List<MoBar>();
   try
   {
    bars = _cache.Get<List<MoBar>>(cacheKey);
   }
   catch (Exception ex)
   {
   }
   return Json(bars);
  }

进度接口只须要猎取cache中的进度信息就好了，注：这里是测试用例，细致运用场景请列位自行增添其他逻辑代码；下面就来看下效果截图：

Task并行处置惩罚+ajax提交+上传进度+一组图片上传

这一小节，将会运用Task来处置惩罚上传的文件，经由过程上一小节截图可以看出，假如你上传多个文件，那末都是根据序次一个一个读取文件流来生成上传文件到效劳器，这里改进一下应用Task的特性，就可以完成同时读取差别文件流了，先来看下html代码和js代码:

<form class="form-horizontal" id="form03" method="post" enctype="multipart/form-data">
    <input type="file" name="MyPhoto03" class="form-control" multiple />
    <br />
    <button type="button" id="btnAjax03" class="btn btn-default">task使命处置惩罚ajax上传进度效果上传</button>
    <br />
    <span style="color:red" id="span03"></span>
   </form>

因为和示例3的js代码无差别这里我直接贴出代码：

$("#btnAjax03").on("click", function () {
   var interBar;
   var msg = $("#span03");
   msg.html("上传中，请稍后...");
   var form = document.getElementById("form03");
   //console.log(form);
   var data = new FormData(form);
   $.ajax({
    type: "POST",
    url: "/home/AjaxFileUp03",
    data: data,
    contentType: false,
    processData: false,
    success: function (data) {
     if (data) {
      msg.html(data.msg);
      //消灭进度查询
      if (interBar) { clearInterval(interBar); }
     }
    },
    error: function () {
     msg.html("上传文件非常,请稍后重试！");
     if (interBar) { clearInterval(interBar); }
    }
   });
   //猎取进度
   interBar = setInterval(function () {
    $.post("/home/ProgresBar03", function (data) {
     if (data) {
      var isClearVal = true;
      var strArr = [];
      $.each(data, function (i, item) {
       strArr.push('文件：' + item.fileName + ",当前上传：" + item.percentBar + '<br/>');
       if (item.status != 2) { isClearVal = false; }
      });
      msg.html(strArr.join(''));
      if (isClearVal) {
       if (interBar) { clearInterval(interBar); }
      }
     }
    });
   }, 200);
  });

症结点在背景，经由过程task数组来存储每一个上传文件的处置惩罚使命 Task[] tasks = new Task[len]; ，然后运用 Task.WaitAll(tasks); 守候一切上传使命的完成，这里特别注重了这里必需守候，不然会丧失上传文件流(屡次测试效果)：

/// <summary>
  /// ajax上传进度效果上传
  /// </summary>
  /// <returns></returns>
  [HttpPost]
  public JsonResult AjaxFileUp03()
  {
   var data = new MoData { Msg = "上传失利" };
   try
   {
    var files = Request.Form.Files.Where(b => b.Name == "MyPhoto03");
    //非空限定
    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);
    }
    //初始化上传多个文件的Bar，存储到缓存中，轻易猎取上传进度
    var listBar = new List<MoBar>();
    files.ToList().ForEach(b =>
    {
     listBar.Add(new MoBar
     {
      FileName = b.FileName,
      Status = 1,
      CurrBar = 0,
      TotalBar = b.Length
     });
    });
    _cache.Set<List<MoBar>>(cacheKey03, listBar);
    var len = files.Count();
    Task[] tasks = new Task[len];
    //写入效劳器磁盘
    for (int i = 0; i < len; i++)
    {
     var file = files.Skip(i).Take(1).SingleOrDefault();
     tasks[i] = Task.Factory.StartNew((p) =>
     {
      var item = p as IFormFile;
      //总大小
      var totalSize = item.Length;
      //初始化每次读取大小
      var readSize = 1024L;
      var bt = new byte[totalSize > readSize ? readSize : totalSize];
      //当前已读取的大小
      var currentSize = 0L;
      var fileName = item.FileName;
      var path = Path.Combine(@"D:\F\进修\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
      using (var stream = System.IO.File.Create(path))
      {
       //进度条处置惩罚流程
       using (var inputStream = item.OpenReadStream())
       {
        //读取上传文件流
        while (inputStream.Read(bt, 0, bt.Length) > 0)
        {
         //当前读取的长度
         currentSize += bt.Length;
         //写入上传流到效劳器文件中
         stream.Write(bt, 0, bt.Length);
         //猎取每次读取的大小
         readSize = currentSize + readSize <= totalSize ?
           readSize :
           totalSize - currentSize;
         //从新设置
         bt = new byte[readSize];
         //设置当前上传的文件进度，并从新缓存到进度缓存中
         var bars = _cache.Get<List<MoBar>>(cacheKey03);
         var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
         currBar.CurrBar = currentSize;
         currBar.Status = currentSize >= totalSize ? 2 : 1;
         _cache.Set<List<MoBar>>(cacheKey03, bars);
         System.Threading.Thread.Sleep(1000 * 1);
        }
       }
      }
     }, file);
    }
    //使命守候 ，这里必需守候，不然会丧失上传文件流
    Task.WaitAll(tasks);
    data.Msg = "上传完成";
    data.Status = 2;
   }
   catch (Exception ex)
   {
    data.Msg = ex.Message;
   }
   return Json(data);
  }

至于猎取上传进度的Action也仅仅只是读取缓存数据罢了：

[HttpPost]
  public JsonResult ProgresBar03()
  {
   var bars = new List<MoBar>();
   try
   {
    bars = _cache.Get<List<MoBar>>(cacheKey03);
   }
   catch (Exception ex)
   {
   }
   return Json(bars);
  }

这里再给出上传进度的实体类：

public class MoData
 {
  /// <summary>
  /// 0：失利 1：上传中 2:胜利
  /// </summary>
  public int Status { get; set; }

  public string Msg { get; set; }
 }

 public class MoBar : MoData
 {
  /// <summary>
  /// 文件名字
  /// </summary>
  public string FileName { get; set; }

  /// <summary>
  /// 当前上传大小
  /// </summary>
  public long CurrBar { get; set; }

  /// <summary>
  /// 总大小
  /// </summary>
  public long TotalBar { get; set; }

  /// <summary>
  /// 进度百分比
  /// </summary>
  public string PercentBar
  {
   get
   {
    return $"{(this.CurrBar * 100 / this.TotalBar)}%";
   }
  }
 }

到此task使命处置惩罚上传文件的体式格局就完成了，咋们来看图看效果吧：

可以经由过程示例3和4的效果图对比出，没运用Task和运用的效果区分，如许效果您值得具有，耐烦读完本文内容的朋侪，没让你扫兴吧，假如可以无妨点个"赞"或扫个码支撑下作者，感谢；内容末了附上细致测试用例代码：.NetCore上传多文件的几种示例

以上就是.NetCore完成上传多文件的示例详解的细致内容，更多请关注ki4网别的相干文章！