.NetCore實(shí)現(xiàn)上傳多文件的示例詳解

更新時(shí)間：2017年04月11日 09:49:39 作者：神牛步行3

本章和大家分享的是.NetCore的MVC框架上傳文件的示例，主要講的內(nèi)容有：form方式提交上傳，ajax上傳，ajax提交+上傳進(jìn)度效果，Task并行處理+ajax提交+上傳進(jìn)度，對(duì)大家非常有幫助，感興趣的朋友跟隨小編一起學(xué)習(xí)吧

本章和大家分享的是.NetCore的MVC框架上傳文件的示例，主要講的內(nèi)容有：form方式提交上傳，ajax上傳，ajax提交+上傳進(jìn)度效果，Task并行處理+ajax提交+上傳進(jìn)度，相信當(dāng)你讀完文章內(nèi)容后能后好的收獲，如果可以不妨點(diǎn)個(gè)贊；由于昨天電腦沒(méi)電了，快要寫(xiě)完的內(nèi)容沒(méi)有保存，今天早上提前來(lái)公司從頭開(kāi)始重新，斷電這情況的確讓人很頭痛啊，不過(guò)為了社區(qū)的分享環(huán)境，這也是值得的，不多說(shuō)了來(lái)進(jìn)入今天的正篇環(huán)節(jié)吧；

form方式上傳一組圖片

先來(lái)看看咋們html的代碼，這里先簡(jiǎn)單說(shuō)下要上傳文件必須要設(shè)置form元素里面的 enctype="multipart/form-data" 屬性和post方式，如果你想要多選上傳文件的話，需要把文件type='file'元素設(shè)置她的屬性multiple='multiple'，因此就有了如下內(nèi)容：

<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提交，這個(gè)測(cè)試用例只接用了button元素默認(rèn)的type=submit來(lái)提交表單，對(duì)應(yīng)的后臺(tái)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("請(qǐng)上傳圖片。"); 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\學(xué)習(xí)\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
  using (var stream = System.IO.File.Create(path))
  {
   await file.CopyToAsync(stream);
  }
  }
  MsgBox($"上傳成功");
  return View();
 }

從前端到后端的Action不得不說(shuō)這種form表單提交的方式挺簡(jiǎn)單的，需要注意的是Action這里用的實(shí)體模型方式來(lái)對(duì)應(yīng)上傳的文件信息，這里自定義了MoUser類，通過(guò)屬性 public List<IFormFile> MyPhoto { get; set; } 來(lái)匹配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; }
 }

這樣就能通過(guò)實(shí)體模型的方式把上傳的文件信息存儲(chǔ)在自定義MoUser類中的MyPhoto屬性中了；

ajax上傳一組圖片

這里需要在上面例子中的html處修改一些東西，不再使用form提交，指定了普通button按鈕來(lái)觸發(fā)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>

有了布局，再來(lái)看看具體的js實(shí)現(xiàn)代碼，這里我采用jquery的ajax提交的方法來(lái)操作，也用到了html5新增的FormData來(lái)存儲(chǔ)表單的數(shù)據(jù)：

$("#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("上傳文件異常,請(qǐng)稍后重試！");
  }
  });
 });

至于后臺(tái)Action的方法和示例一的相差不大，關(guān)鍵點(diǎn)在于這里我直接使用 Request.Form.Files 方式來(lái)獲取上傳的所有文件，不再使用實(shí)體模型的方式了，這樣測(cè)試用例更多樣化吧：

/// <summary>
 /// ajax無(wú)上傳進(jìn)度效果上傳
 /// </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 = "請(qǐng)選擇上傳的文件。"; 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);
  }
  //寫(xiě)入服務(wù)器磁盤(pán)
  foreach (var file in files)
  {
   var fileName = file.FileName;
   var path = Path.Combine(@"D:\F\學(xué)習(xí)\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);
 }

如果你有耐心讀到這里，那么后面的內(nèi)容個(gè)人感覺(jué)對(duì)你開(kāi)發(fā)會(huì)有好的幫助，不負(fù)你期待；

ajax提交+上傳進(jìn)度+一組圖片上傳

同樣我們先來(lái)看對(duì)應(yīng)的html代碼，其實(shí)和示例2幾乎一樣，只是把名稱變動(dòng)了下：

<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上傳進(jìn)度效果上傳</button>
  <br />
  <span style="color:red" id="span02"></span>
  </form>

要加一個(gè)進(jìn)度效果，需要用到j(luò)s的定時(shí)器，定時(shí)獲取上傳文件的上傳進(jìn)度數(shù)據(jù)信息，因此這里通過(guò)js的setInterval方法來(lái)定時(shí)請(qǐng)求一個(gè)進(jìn)度數(shù)據(jù)接口，注意用完之后需要清除這個(gè)定時(shí)器，不然一直再不斷請(qǐng)求您接口：

 $("#btnAjax02").on("click", function () {
  var interBar;
  var msg = $("#span02");
  msg.html("上傳中，請(qǐng)稍后...");
  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);
    //清除進(jìn)度查詢
    if (interBar) { clearInterval(interBar); }
   }
   },
   error: function () {
   msg.html("上傳文件異常,請(qǐng)稍后重試！");
   if (interBar) { clearInterval(interBar); }
   }
  });
  //獲取進(jìn)度
  interBar = setInterval(function () {
   $.post("/home/ProgresBar02", function (data) {
   if (data) {
    var isClearVal = true;
    var strArr = [];
    $.each(data, function (i, item) {
    strArr.push('文件：' + item.fileName + ",當(dāng)前上傳：" + item.percentBar + '<br/>');
    if (item.status != 2) { isClearVal = false; }
    });
    msg.html(strArr.join(''));
    if (isClearVal) {
    if (interBar) { clearInterval(interBar); }
    }
   }
   });
  }, 200);
  });

既然上面說(shuō)到單獨(dú)的進(jìn)度數(shù)據(jù)接口，那么我們除了上傳Action外，也需要進(jìn)度的Action，而這進(jìn)度Action得到的上傳文件數(shù)據(jù)信息必須和上傳的Action一直，因此就需要用到緩存等存儲(chǔ)數(shù)據(jù)的方式，這里我用的是MemoryCache的方式，對(duì)已netcore來(lái)說(shuō)僅僅只需要在起始文件（如：Startup.cs）中添加組件服務(wù)：

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

然后通過(guò)構(gòu)造函數(shù)注入到對(duì)應(yīng)的接口Controller中去：

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

到此我們就能利用cache來(lái)存儲(chǔ)我們上傳進(jìn)度信息了，來(lái)看下處理上傳的Action：

private string cacheKey = "UserId_UpFile";
 private string cacheKey03 = "UserId_UpFile03";
 /// <summary>
 /// ajax上傳進(jìn)度效果上傳
 /// </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 = "請(qǐng)選擇上傳的文件。"; 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);
  }
  //初始化上傳多個(gè)文件的Bar，存儲(chǔ)到緩存中，方便獲取上傳進(jìn)度
  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);
  //寫(xiě)入服務(wù)器磁盤(pán)
  foreach (var file in files)
  {
   //總大小
   var totalSize = file.Length;
   //初始化每次讀取大小
   var readSize = 1024L;
   var bt = new byte[totalSize > readSize ? readSize : totalSize];
   //當(dāng)前已經(jīng)讀取的大小
   var currentSize = 0L;
   var fileName = file.FileName;
   var path = Path.Combine(@"D:\F\學(xué)習(xí)\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
   using (var stream = System.IO.File.Create(path))
   {
   //await file.CopyToAsync(stream);
   //進(jìn)度條處理流程
   using (var inputStream = file.OpenReadStream())
   {
    //讀取上傳文件流
    while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0)
    {
    //當(dāng)前讀取的長(zhǎng)度
    currentSize += bt.Length;
    //寫(xiě)入上傳流到服務(wù)器文件中
    await stream.WriteAsync(bt, 0, bt.Length);
    //獲取每次讀取的大小
    readSize = currentSize + readSize <= totalSize ?
     readSize :
     totalSize - currentSize;
    //重新設(shè)置
    bt = new byte[readSize];
    //設(shè)置當(dāng)前上傳的文件進(jìn)度，并重新緩存到進(jìn)度緩存中
    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);
 }

代碼一下子就變多了，其實(shí)按照邏輯來(lái)說(shuō)增加了存儲(chǔ)進(jìn)度的Cache，和逐一讀取上傳文件流的邏輯而已，具體大家可以仔細(xì)看下代碼，都有備注說(shuō)明；再來(lái)就是咋們的進(jìn)度信息Action接口：

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

進(jìn)度接口只需要獲取cache中的進(jìn)度信息就行了，注：這里是測(cè)試用例，具體使用場(chǎng)景請(qǐng)各位自行增加其他邏輯代碼；下面就來(lái)看下效果截圖：

Task并行處理+ajax提交+上傳進(jìn)度+一組圖片上傳

這一小節(jié)，將會(huì)使用Task來(lái)處理上傳的文件，通過(guò)上一小節(jié)截圖能夠看出，如果你上傳多個(gè)文件，那么都是按照次序一個(gè)一個(gè)讀取文件流來(lái)生成上傳文件到服務(wù)器，這里改良一下利用Task的特點(diǎn)，就能實(shí)現(xiàn)同時(shí)讀取不同文件流了，先來(lái)看下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任務(wù)處理ajax上傳進(jìn)度效果上傳</button>
    <br />
    <span style="color:red" id="span03"></span>
   </form>

由于和示例3的js代碼無(wú)差別這里我直接貼出代碼：

$("#btnAjax03").on("click", function () {
   var interBar;
   var msg = $("#span03");
   msg.html("上傳中，請(qǐng)稍后...");
   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);
      //清除進(jìn)度查詢
      if (interBar) { clearInterval(interBar); }
     }
    },
    error: function () {
     msg.html("上傳文件異常,請(qǐng)稍后重試！");
     if (interBar) { clearInterval(interBar); }
    }
   });
   //獲取進(jìn)度
   interBar = setInterval(function () {
    $.post("/home/ProgresBar03", function (data) {
     if (data) {
      var isClearVal = true;
      var strArr = [];
      $.each(data, function (i, item) {
       strArr.push('文件：' + item.fileName + ",當(dāng)前上傳：" + item.percentBar + '<br/>');
       if (item.status != 2) { isClearVal = false; }
      });
      msg.html(strArr.join(''));
      if (isClearVal) {
       if (interBar) { clearInterval(interBar); }
      }
     }
    });
   }, 200);
  });

關(guān)鍵點(diǎn)在后臺(tái)，通過(guò)task數(shù)組來(lái)存儲(chǔ)每個(gè)上傳文件的處理任務(wù) Task[] tasks = new Task[len]; ，然后使用 Task.WaitAll(tasks); 等待所有上傳任務(wù)的完成，這里特別注意了這里必須等待，不然會(huì)丟失上傳文件流(多次測(cè)試結(jié)果)：

/// <summary>
  /// ajax上傳進(jìn)度效果上傳
  /// </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 = "請(qǐng)選擇上傳的文件。"; 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);
    }
    //初始化上傳多個(gè)文件的Bar，存儲(chǔ)到緩存中，方便獲取上傳進(jìn)度
    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];
    //寫(xiě)入服務(wù)器磁盤(pán)
    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];
      //當(dāng)前已經(jīng)讀取的大小
      var currentSize = 0L;
      var fileName = item.FileName;
      var path = Path.Combine(@"D:\F\學(xué)習(xí)\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
      using (var stream = System.IO.File.Create(path))
      {
       //進(jìn)度條處理流程
       using (var inputStream = item.OpenReadStream())
       {
        //讀取上傳文件流
        while (inputStream.Read(bt, 0, bt.Length) > 0)
        {
         //當(dāng)前讀取的長(zhǎng)度
         currentSize += bt.Length;
         //寫(xiě)入上傳流到服務(wù)器文件中
         stream.Write(bt, 0, bt.Length);
         //獲取每次讀取的大小
         readSize = currentSize + readSize <= totalSize ?
           readSize :
           totalSize - currentSize;
         //重新設(shè)置
         bt = new byte[readSize];
         //設(shè)置當(dāng)前上傳的文件進(jìn)度，并重新緩存到進(jìn)度緩存中
         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);
    }
    //任務(wù)等待 ，這里必須等待，不然會(huì)丟失上傳文件流
    Task.WaitAll(tasks);
    data.Msg = "上傳完成";
    data.Status = 2;
   }
   catch (Exception ex)
   {
    data.Msg = ex.Message;
   }
   return Json(data);
  }

至于獲取上傳進(jìn)度的Action也僅僅只是讀取緩存數(shù)據(jù)而已：

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

這里再給出上傳進(jìn)度的實(shí)體類：

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>
  /// 當(dāng)前上傳大小
  /// </summary>
  public long CurrBar { get; set; }

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

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

到此task任務(wù)處理上傳文件的方式就完成了，咋們來(lái)看圖看效果吧：

能夠通過(guò)示例3和4的效果圖對(duì)比出，沒(méi)使用Task和使用的效果區(qū)別，這樣效果您值得擁有，耐心讀完本文內(nèi)容的朋友，沒(méi)讓你失望吧，如果可以不妨點(diǎn)個(gè)"贊"或掃個(gè)碼支持下作者，謝謝；內(nèi)容最后附上具體測(cè)試用例代碼：.NetCore上傳多文件的幾種示例

以上所述是小編給大家介紹的.NetCore實(shí)現(xiàn)上傳多文件的示例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: