suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Beispiel für das Hochladen von Dateien in Blöcken im asp.net-Kern

Beispiel für das Hochladen von Dateien in Blöcken im asp.net-Kern

高洛峰
高洛峰Original
2017-02-20 17:16:351529Durchsuche

Nachdem ich den Multi-File-Upload für asp.net geschrieben hatte, hatte ich das Gefühl, dass diese Art des Uploads immer noch viele Mängel aufweist. . . (Lassen Sie 10.000 Wörter weg, kein Unsinn). Hier habe ich nicht das traditionelle asp.net verwendet, sondern mich für den Open-Source-asp.net-Kern entschieden. Der Grund dafür ist ganz einfach: Es ist ein Neuanfang für .net und die Zukunft von .net und .net-Entwicklern . Ich hoffe, dass sich .net immer besser entwickelt (die Löhne aller werden immer höher (●ˇ∀ˇ●)).

1. Frontend-Implementierung:

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!!!");
        }
      }
    }
  });
}

Die Hauptidee hier ist, die Slice-Methode der HTML5-Datei-API zu verwenden, um die zu teilen Datei in Blöcke aufteilen und dann ein neues FormData()-Objekt zum Speichern von Dateidaten verwenden und dann die AjaxFile-Methode rekursiv aufrufen, bis der Upload abgeschlossen ist.

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;
    }

  }
}

Die Idee hier ist, jede segmentierte Datei zunächst in einem temporären Ordner zu speichern. und schließlich diese temporären Dateien über FileStream zusammenführen (die Zusammenführung muss in Ordnung sein). Alle Hintergrundmethoden sind asynchron (asynchrones Warten ist wirklich einfach zu verwenden). Ich weiß zwar nicht, ob es die Effizienz verbessert, aber ich finde es einfach cool.

Quellcode-Download: DotNet_jb51.rar

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder ihn unterstützt die chinesische PHP-Website.

Weitere Artikel zu Beispielen für das Hochladen von Asp.net-Kernblöcken finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Koexistenzlösung für ASP.NET- und ASP.NET Core-BenutzerauthentifizierungscookiesNächster Artikel：Ausführliche Erläuterung der Koexistenzlösung für ASP.NET- und ASP.NET Core-Benutzerauthentifizierungscookies

In Verbindung stehende Artikel

Mehr sehen