.NetCore实现上传多文件的示例详解

本章和大家分享的是.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实现上传多文件的示例详解，希望对大家有所帮助