Home  >  Article  >  Backend Development  >  Example of uploading files in chunks in asp.net core

Example of uploading files in chunks in asp.net core

高洛峰
高洛峰Original
2017-02-20 17:16:351528browse

After writing asp.net multi-file upload, I felt that this kind of upload still has many flaws, so. . . (Omit 10,000 words, no nonsense). Here I did not use the traditional asp.net, but chose the open source asp.net core. The reason is very simple. .net core is a new beginning for .net, and it is the future of .net and .net developers. I hope that .net will develop. It’s getting better and better (everyone’s wages are getting higher and higher (●ˇ∀ˇ●)).

1. Front-end implementation:

1).html:

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
  <script src="/lib/jquery/dist/jquery.js"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/js/UploadJs.js"></script>
</head>
<body>
  <p class="row" style="margin-top:20%">
    <p class="col-lg-4"></p>
    <p class="col-lg-4">
      <input type="text" value="请选择文件" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
      <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
      <input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
      <br />
      <span id="output">0%</span>
      <button type="button" id="file" onclick="UploadStart()" style="border:1px solid #ccc;background:#fff">开始上传</button>
    </p>
    <p class="col-lg-4"></p>
  </p>
</body>
</html>

2).javascript:

var UploadPath = "";
//开始上传
function UploadStart() {
  var file = $("#path")[0].files[0];
  AjaxFile(file, 0);
}
function AjaxFile(file, i) {
  var name = file.name, //文件名
  size = file.size, //总大小shardSize = 2 * 1024 * 1024, 
  shardSize = 2 * 1024 * 1024,//以2MB为一个分片
  shardCount = Math.ceil(size / shardSize); //总片数
  if (i >= shardCount) {
    return;
  }
  //计算每一片的起始与结束位置
  var start = i * shardSize,
  end = Math.min(size, start + shardSize);
  //构造一个表单,FormData是HTML5新增的
  var form = new FormData();
  form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
  form.append("lastModified", file.lastModified);
  form.append("fileName", name);
  form.append("total", shardCount); //总片数
  form.append("index", i + 1); //当前是第几片
  UploadPath = file.lastModified
  //Ajax提交文件
  $.ajax({
    url: "/Upload/UploadFile",
    type: "POST",
    data: form,
    async: true, //异步
    processData: false, //很重要,告诉jquery不要对form进行处理
    contentType: false, //很重要,指定为false才能形成正确的Content-Type
    success: function (result) {
      if (result != null) {
        i = result.number++;
        var num = Math.ceil(i * 100 / shardCount);
        $("#output").text(num + &#39;%&#39;);
        AjaxFile(file, i);
        if (result.mergeOk) {
          var filepath = $("#path");
          filepath.after(filepath.clone().val(""));
          filepath.remove();//清空input file
          $(&#39;#upfile&#39;).val(&#39;请选择文件&#39;);
          alert("success!!!");
        }
      }
    }
  });
}

The main idea here is to use the slice method of html5 File api to divide the file into chunks, and then create a new FormData( ) object is used to store file data, and then the AjaxFile method is called recursively until the upload is completed.

2.Backend C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.IO;

// For more information on enabling MVC for empty projects, visit http://www.php.cn/

namespace DotNet.Upload.Controllers
{
  public class UploadController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }

    [HttpPost]
    public async Task<ActionResult> UploadFile()
    {
      var data = Request.Form.Files["data"];
      string lastModified = Request.Form["lastModified"].ToString();
      var total = Request.Form["total"];
      var fileName = Request.Form["fileName"];
      var index = Request.Form["index"];

      string temporary = Path.Combine(@"E:\浏览器", lastModified);//临时保存分块的目录
      try
      {
        if (!Directory.Exists(temporary))
          Directory.CreateDirectory(temporary);
        string filePath = Path.Combine(temporary, index.ToString());
        if (!Convert.IsDBNull(data))
        {
          await Task.Run(() => {
            FileStream fs = new FileStream(filePath, FileMode.Create);
            data.CopyTo(fs);
          });
        }
        bool mergeOk = false;
        if (total == index)
        {
          mergeOk = await FileMerge(lastModified, fileName);
        }

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("number", index);
        result.Add("mergeOk", mergeOk);
        return Json(result);

      }
      catch (Exception ex)
      {
        Directory.Delete(temporary);//删除文件夹
        throw ex;
      }
    }

    public async Task<bool> FileMerge(string lastModified,string fileName)
    {
      bool ok = false;
      try
      {
        var temporary = Path.Combine(@"E:\浏览器", lastModified);//临时文件夹
        fileName = Request.Form["fileName"];//文件名
        string fileExt = Path.GetExtension(fileName);//获取文件后缀
        var files = Directory.GetFiles(temporary);//获得下面的所有文件
        var finalPath = Path.Combine(@"E:\浏览器", DateTime.Now.ToString("yyMMddHHmmss") + fileExt);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
        var fs = new FileStream(finalPath, FileMode.Create);
        foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
        {
          var bytes = System.IO.File.ReadAllBytes(part);
          await fs.WriteAsync(bytes, 0, bytes.Length);
          bytes = null;
          System.IO.File.Delete(part);//删除分块
        }
        fs.Close();
        Directory.Delete(temporary);//删除文件夹
        ok = true;
      }
      catch (Exception ex)
      {
        throw ex;
      }
      return ok;
    }

  }
}

The idea here is to first save each chunked file to a temporary folder , and finally merge these temporary files through FileStream (the merge must be in order). All background methods are asynchronous (async await is really easy to use). Although I don’t know if it improves efficiency, I just think it’s cool.

Source code download: DotNet_jb51.rar

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more asp.net core block upload file examples and related articles, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn