一、.Net Core 分块上传文件

一、前端实现

@*

    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

*@

@{

    ViewData["Title"] = "Index";

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <link href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/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!!!");

                        }

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div class="row" style="margin-top:20%">

        <div class="col-lg-4"></div>

        <div 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>

        </div>

        <div class="col-lg-4"></div>

    </div>

</body>

</html>

这里的主要思路是利用html5 File api的slice方法把文件分块，

然后new一个FormData()对象用于储存文件数据，之后就是递归调用AjaxFile方法直至上传完毕。

后台代码:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

namespace WebApplication2.Controllers

{

    public class UploadController : 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(@"D:\浏览器", 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);

                        fs.Close();

                    });

                }

                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(@"D:\浏览器", lastModified);//临时文件夹

                fileName = Request.Form["fileName"];//文件名

                string fileExt = Path.GetExtension(fileName);//获取文件后缀

                var files = Directory.GetFiles(temporary);//获得下面的所有文件

                var finalPath = Path.Combine(@"D:\浏览器", 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, , bytes.Length);

                    bytes = null;

                    System.IO.File.Delete(part);//删除分块

                }

                fs.Close();

                Directory.Delete(temporary);//删除文件夹

                ok = true;

            }

            catch (Exception ex)

            {

                throw ex;

            }

            return ok;

        }

    }

}

这里的思路就是先保存每一个分块的文件到一个临时文件夹，

最后再通过FileStream合并这些临时文件（合并时必需要按顺序）。

后台的方法都进行了异步化（async await真的非常好用），

虽然不知道对效率有没有提升，但是就是觉得这样很酷。

一、.Net Core 分块上传文件的更多相关文章

  1. net core分块上传文件

    net core分块上传文件   写完asp.net多文件上传(http://www.cnblogs.com/bestckk/p/5987383.html)后,感觉这种上传还是有很多缺陷,于是...( ...

  2. asp.net core分块上传文件

    写完asp.net多文件上传(http://www.cnblogs.com/bestckk/p/5987383.html)后,感觉这种上传还是有很多缺陷,于是...(省略一万字,不废话).这里我没用传 ...

  3. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  4. 改造kindeditor支持asp.net core mvc上传文件

    kindtor默认使用的上传方法是使用目录下面的一般处理程序upload_json.ashx,暂时还不支持asp.net core下的文件上传,下面放出的自定义处理上传文件的接口方法. 自定义接收上传 ...

  5. .NET Core 如何上传文件及处理大文件上传

    当你使用IFormFile接口来上传文件的时候,一定要注意,IFormFile会将一个Http请求中的所有文件都读取到服务器内存后,才会触发ASP.NET Core MVC的Controller中的A ...

  6. ASP.NET Core MVC上传文件

    使用模型绑定上传小文件 HTML代码: <form method="post" enctype="multipart/form-data" asp-con ...

  7. .net core2.2上传文件总结

    总结一下.net core的上传文件操作,这里主要分上传到本地的也就是MVC的,另一种是上传到WebAPi的. 一.Web端 1.新建一个.net core mvc项目 2.这里的版本是.net co ...

  8. 金山云 KS3 Python SDK 多线程并发上传文件；下载断点续传 参考脚本

    并发上传 基于py自带模块 concurrent.futures import ThreadPoolExecutor #!/usr/bin/env python3 # -*- coding:utf-8 ...

  9. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

随机推荐

  1. JS onclick中this用法

    当在dom元素中使用onclick绑定事件的时候,可以使用this来指向该元素对象. 打印输出的内容为: 所以可以通过该this对象来获取子元素 //通过element获取该对象下的一个audio标签 ...

  2. Numpy基础(数组创建，切片，通用函数）

    1.创建ndarray 数组的创建函数: array:将输入的数据(列表,元组,数组,或者其他序列类型)转换为ndarray.要么推断出dtype,要么显式给定dtype asarray:将输入转换为 ...

  3. SSM整合--------试题分析

  4. JS判断Android、iOS或浏览器的多种方法(四种方法)

    第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> ...

  5. windows 2008 gpt

    新服务器,4T硬盘,U盘安装Windows Server 2008 R2. 把2008的镜像用UltraISO写入U盘. 安装到分区那块,主分区200G,剩余分区系统自动给分为: 2T + 剩余 两块 ...

  6. codeforces 668C - Little Artem and Random Variable

    题目链接:http://codeforces.com/contest/668/problem/C --------------------------------------------------- ...

  7. 十七、jenkins运行robotframework脚本，配置自动发送邮件

    一.配置系统管理-系统设置: A.系统管理--系统设置--Jenkins Location-系统管理员邮件地址:配置管理员邮箱全称(qq,163等都可以) B.配置管理员邮箱属性: 1.输入smtp服 ...

  8. linux中也有闹钟alarm, timer, stopwatch, world clock 等等

    stopwatch和timer的区别? timer叫计时器, 是先给出一个时间, 然后从现在开始, 倒数, 减少, 直到时间为0 stopwatch 叫跑錶, 则是从现在开始, 往后 增加时间, 事先 ...

  9. Vue音乐播放器（三）：项目目录介绍，以及图标字体、公共样式等资源准备

    我们所有的开发都是基于修改src下面的目录 里面的文件去做开发即可 stylus的使用是需要下载stylus-loader的包的 渲染效果 配置修改eslintrc.js 配置了webpack.bas ...

  10. 使用@Value注解对bean进行属性注入

    使用@Value注解,可以有三种属性注入的方式: 1. 使用字面量注入 2. 使用EL表达式注入 3. 使用占位符注入 import org.springframework.beans.factory ...