Après avoir écrit le téléchargement multi-fichiers asp.net, j'ai senti que ce type de téléchargement avait encore de nombreux défauts, donc. . . (Omettez 10 000 mots, pas de bêtises). Ici, je n'ai pas utilisé le noyau asp.net traditionnel, mais j'ai choisi le noyau asp.net open source. La raison est très simple. Le noyau .net est un nouveau départ pour .net, et c'est l'avenir des développeurs .net et .net. . J’espère que le .net va se développer. Cela va de mieux en mieux (les salaires de chacun sont de plus en plus élevés (•ˇ∀ˇ•)).
1. Implémentation front-end :
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 + '%'); AjaxFile(file, i); if (result.mergeOk) { var filepath = $("#path"); filepath.after(filepath.clone().val("")); filepath.remove();//清空input file $('#upfile').val('请选择文件'); alert("success!!!"); } } } }); }
L'idée principale ici est d'utiliser la méthode slice de l'API html5 File pour diviser le fichier en morceaux, puis un nouvel objet FormData() est utilisé pour stocker les données du fichier, puis la méthode AjaxFile est appelée de manière récursive jusqu'à ce que le téléchargement soit terminé.
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; } } }
L'idée ici est d'abord de sauvegarder chaque fichier fragmenté dans un dossier temporaire, et enfin fusionner ces fichiers temporaires via FileStream (la fusion doit être dans l'ordre). Toutes les méthodes d'arrière-plan sont asynchrones (l'attente asynchrone est vraiment facile à utiliser). Même si je ne sais pas si cela améliore l'efficacité, je pense juste que c'est cool.
Téléchargement du code source : DotNet_jb51.rar
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde le soutiendra. le site Web PHP chinois.
Pour plus d'exemples de téléchargement de fichiers fragmentés asp.net et d'articles connexes, veuillez faire attention au site Web PHP chinois !