现在的项目开发基本上都用到了上传文件功能，或图片，或文档，或视频。我们常用的常规上传已经能够满足当前要求了，

然而有时会出现如下问题：

  1. 文件过大（比如1G以上），超出服务端的请求大小限制；
  2. 请求时间过长，请求超时；
  3. 传输中断，必须重新上传导致前功尽弃；
  4. 设置了webconfig和iis后还是不能上传成功；
  5. 不想使用FTP，只想用http。

我们这里只讲分片上传，至于断网续传和秒传已经写好demo，下载路径放在文末，有兴趣的可以下载下来自己玩玩。

分片上传demo下载地址：https://pan.baidu.com/s/1osGyv2qYzTmtNIImqkcKvw 提取码：ie57

分片上传、断网续传、秒传demo下载地址：https://pan.baidu.com/s/1TuvGR6qUcKLMFjZGaQl5vg 提取码：aej4

http的网络请求中本身就已经具备了分片上传功能，那么什么是分片上传？我们来看看：

分片上传原理

片上传支持将一个文件切割为一系列特定大小的数据片，分别将这些小数据片上传到服务端，全部上传完后再在服务端将这些数据片合并成为一个资源。

分片上传引入了两个概念：块（Block）和片（Chunk）。每个块由一到多个片组成，而一个资源则由一到多个块组成。他们之间的关系可以用下图表述：

块和片是上传过程中作为临时存储的单位。服务端会以约七天为单位的周期清除上传后未被合并为块(文件)的数据片(块)。

与分片上传相关的 API 有：创建块(mkblk)、上传片(bput)、创建文件(mkfile)。一个完整的分片上传流程可用下图表示：

其中的关键点如下：

将待上传的文件按预定义块大小切分为若干个块（每块大小不大于 4MB：块的大小可以自定义）。如果这个文件小于 4MB，就只有一个块。

将每个块再按预定义的片大小切分为若干个片，先在服务端创建一个相应块（通过调用mkblk，并带上第一个片的内容），然后再循环将所有剩下的片全部上传（通过调用bput，从而完成一个块的上传）

在所有块上传完成后，通过调用mkfile将这些上传完成的块信息再严格的按顺序组装出一个逻辑资源的元信息，从而完成整个资源的分片上传过程。

在这个理论基础上，结合WebUploade插件（百度上传插件）和net mvc进行demo编写，老规矩，demo在文末，可以下载。

我们看一下效果图：

分片上传：

　　　　　　上传中（图一）

　　　　　　上传成功（图二）

分片、断网(暂停)、秒传：

上传中（图一）

上传成功（图二）

代码展示：

下载webuploader插件后引入项目中，

主要引用文件：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/webuploader.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

前端完整代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<link href="~/Content/webuploader.css" rel="stylesheet" />

<script src="~/Scripts/webuploader.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

<div id="uploader" class="wu-example">

    <!--用来存放文件信息-->

    <div id="thelist" class="uploader-list"></div>

    <div class="btns">

        <div id="picker">选择文件</div>

        <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />

    </div>

</div>

    <table width="50%" border="" class="fileList_parent">

        <thead>

            <tr style="background-color:#DADADA">

                <th>文件名称</th>

                <th>类型</th>

                <th>大小</th>

                <th>进度</th>

                <th>说明</th>

            </tr>

        </thead>

        <tbody class="fileList">

        </tbody>

    </table>

</body>

</html>

<script>

    var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";

    var GUID = WebUploader.Base.guid();//一个GUID

    $(function () {

        var $ = jQuery;

        var $list = $('#thelist');

        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。

            auto: false,

            // swf文件路径

            swf: applicationPath + '../Content/Uploader.swf',

            // 文件接收服务端。

            server: applicationPath + 'Home/Upload',

            // 选择文件的按钮。可选。

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            pick: '#picker',

            chunked: true,//开始分片上传

            chunkSize: ,//每一片的大小

            formData: {

                guid: GUID //自定义参数，待会儿解释

            },

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

            resize: false

        });

        // 当有文件被添加进队列的时候

        uploader.on('fileQueued', function (file) {

            $list.append('<div id="' + file.id + '" class="item">' +

                '<h4 class="info">' + file.name + '</h4>' +

                '<p class="state">等待上传...</p>' +

                '</div>');

            var name = file.name;    //文件名

            var type = fileType(file.name);    //文件类型，获取的是文件的后缀

            var volume = bytesToSize(file.size);    //文件大小格式化

            var oTr = $("<tr></tr>");

            var str = '<td><cite title="' + name + '">' + name + '</cite></td>';

            str += '<td>' + type + '</td>';

            str += '<td>' + volume + '</td>';

            str += '<td id="jintutiao">';

            str += '<span id="baifenbi"></span>0%';

            str += '</td>';

            str += '<td id="uploding">等待上传</td>';

            $(".fileList").html(str)

        });

        var aa = ;

        // 文件上传过程中创建进度条实时显示。

        uploader.on('uploadProgress', function (file, percentage) {

            var $li = $('#' + file.id),

                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建

            if (!$percent.length) {

                $percent = $('<div class="progress progress-striped active">' +

                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +

                    '</div>' +

                    '</div>').appendTo($li).find('.progress-bar');

            }

            $li.find('p.state').text('上传中');

            $("#uploding").html("上传中");

            $percent.css('width', percentage *  + '%');

            if (percentage == )

            {

                aa++;

            }

            if (aa<=)

            {

                var shuzi=percentage * ;

                $("#baifenbi").html(shuzi.toFixed());

            }

        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。

        uploader.on('uploadSuccess', function (file, response) {

            $('#' + file.id).find('p.state').text('已上传');

            $.post('Home/Merge', { guid: GUID, fileName: file.name }, function (data) {

                $("#uploader .state").html("上传成功...");

                $("#uploding").html("上传成功");

            });

        });

        // 文件上传失败，显示上传出错。

        uploader.on('uploadError', function (file) {

            $('#' + file.id).find('p.state').text('上传出错');

        });

        // 完成上传完了，成功或者失败，先删除进度条。

        uploader.on('uploadComplete', function (file) {

            $('#' + file.id).find('.progress').fadeOut();

        });

        //所有文件上传完毕

        uploader.on("uploadFinished", function () {

            //提交表单

        });

        //开始上传

        $("#ctlBtn").click(function () {

            uploader.upload();

        });

    });

    //字节大小转换，参数为b

    function bytesToSize(bytes) {

        var sizes = ['Bytes', 'KB', 'MB', 'G'];

        if (bytes == ) return 'n/a';

        var i = parseInt(Math.floor(Math.log(bytes) / Math.log()));

        return (bytes / Math.pow(, i)).toFixed() + ' ' + sizes[i];

    };

    //通过文件名，返回文件的后缀名

    function fileType(name) {

        var nameArr = name.split(".");

        return nameArr[nameArr.length - ].toLowerCase();

    }

</script>

后端控制器完整代码展示：

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace BigFileUploader.Controllers

{

    public class HomeController : Controller

    {#region 文件上传

        [HttpPost]

        public ActionResult Upload()

        {

            string fileName = Request["name"];

            string fileRelName = fileName.Substring(, fileName.LastIndexOf('.'));//设置临时存放文件夹名称

            int index = Convert.ToInt32(Request["chunk"]);//当前分块序号

            var guid = Request["guid"];//前端传来的GUID号

            var dir = Server.MapPath("~/Upload");//文件上传目录

            dir = Path.Combine(dir, fileRelName);//临时保存分块的目录

            if (!System.IO.Directory.Exists(dir))

                System.IO.Directory.CreateDirectory(dir);

            string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名，更严谨一些可以加上是否存在的判断，防止多线程时并发冲突

            var data = Request.Files["file"];//表单中取得分块文件

            string extension = data.FileName.Substring(data.FileName.LastIndexOf(".") + ,

                (data.FileName.Length - data.FileName.LastIndexOf(".") - ));//获取文件扩展名

            //if (data != null)//为null可能是暂停的那一瞬间

            //{

            data.SaveAs(filePath + fileName);

            //}

            return Json(new { erron =  });//Demo，随便返回了个值，请勿参考

        }

        public ActionResult Merge()

        {

            var guid = Request["guid"];//GUID

            var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹

            var fileName = Request["fileName"];//文件名

            string fileRelName = fileName.Substring(, fileName.LastIndexOf('.'));

            var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹

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

            var finalPath = Path.Combine(uploadDir, fileName);//最终的文件名（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);

                fs.Write(bytes, , bytes.Length);

                bytes = null;

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

            }

            fs.Flush();

            fs.Close();

            System.IO.Directory.Delete(dir);//删除文件夹

            return Json(new { error =  });//随便返回个值，实际中根据需要返回

        }

        #endregion

    }

}

总结：

以上说的是分片上传的demo，断网续传和秒传在下面，大家下载下来玩哇，个人感觉蛮不错的。
我一直都主张功能点先写demo，有了成功的demo后引入项目中，demo可以存储起来做知识储备，保不定哪天又用到了。

大家感觉小编搞得不错话关注一波，后续还有很多干货在等着你呢^_^

分片上传demo下载地址：https://pan.baidu.com/s/1osGyv2qYzTmtNIImqkcKvw 提取码：ie57

分片上传、断网续传、秒传demo下载地址：https://pan.baidu.com/s/1TuvGR6qUcKLMFjZGaQl5vg 提取码：aej4

30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传（文末附带demo下载）的更多相关文章

  1. thinkphp+webuploader实现大文件分片上传

    大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档:http://fex.baidu.com/webu ...

  2. 在React中使用WebUploader实现大文件分片上传的踩坑日记！

    前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件. 具体交互是: 1. 点击上传文件button后出现弹窗,弹窗内有选择文件 ...

  3. ASP.NET CORE使用WebUploader对大文件分片上传，并通过ASP.NET CORE SignalR实时反馈后台处理进度给前端展示

    本次,我们来实现一个单个大文件上传,并且把后台对上传文件的处理进度通过ASP.NET CORE SignalR反馈给前端展示,比如上传一个大的zip压缩包文件,后台进行解压缩,并且对压缩包中的文件进行 ...

  4. .NetCore+WebUploader实现大文件分片上传

    项目要求通过网站上传大文件,比如视频文件,通过摸索实现了文件分片来上传,然后后台进行合并. 使用了开源的前台上传插件WebUploader(http://fex.baidu.com/webupload ...

  5. 使用webuploader实现大文件分片上传

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  6. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  7. webUploader实现大文件分片，断点续传

    问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www. ...

  8. b/s利用webuploader实现超大文件分片上传、断点续传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  9. 前端利用webuploader实现超大文件分片上传、断点续传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

随机推荐

  1. 关于html以及js相关格式验证的记录

    关于html中禁止输入的一些写法主要是实现实时监听值:      下面的例子实现的事只运行输入数字切小数位数不能超过两位的示例.      1. onkeyup事件是在输的时候在键盘松开的时候进行触发 ...

  2. JAVA学习资源分享

    JAVA学习资源分享 最高端的JAVA架构师资源(来自龙果学院 价值￥1399元).JAVA互联网分布式架构(龙果学院 价值￥899元).Spring Boot(2017年最新 包括源码原理分析) + ...

  3. define 的全部使用方法

    typedef的总结,以下是引用的内容(红色部分是我自己写的内容). 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如: char* pa, pb; // 这 ...

  4. ajax如何实现、readyState五中状态的含义

    转载:http://www.cnblogs.com/teroy/p/3917439.html 熟悉web开发的程序员想必对Ajax也不会陌生.现在已经有很多js框架封装了ajax实现,例如JQuery ...

  5. Java NIO核心组件简介

    原文链接:http://tutorials.jenkov.com/java-nio/overview.html NIO包含下面几个核心的组件: Channels Buffer Selector 整个N ...

  6. 你必须知道的EntityFramework 6.x和EntityFramework Core变更追踪状态

    前言 只要有时间就会时不时去看最新EF Core的进展情况,同时也会去看下基础,把握好基础至关重要,本节我们对比看看如标题EF 6.x和EF Core的不同,希望对正在学习EF Core的同行能有所帮 ...

  7. Activity的运行过程

    今天看到了这个关于Activity的过程这个方面的知识,之前我其实也是做过安卓项目的,也是有安卓开发的一定经验的,但是我发现之前似乎是知其然,而不知其所以然,之前来说只知道activity里的onCr ...

  8. Java集合类的详解与应用

    Java集合类的详解与应用 集合简介: 1.定义:可以同时存储不同类型的数据 他的存储空间会随着数据的增大而增大 2.缺点:只能存储引用数据类型 3.优点:更加合理的利用空间,封装了更多的方法,用起来 ...

  9. VM虚拟机下安装liunx系统

    1.首先打开VMware看到如图所示,然后点击创建虚拟机,选择典型然后下一步 2.选择我稍后安装操作系统然后下一步,选择Linux系统然后下一步.给虚拟机起一个名字,和选择把虚拟机安装在那个位置.然后 ...

  10. spring的依赖注入是什么意思

    最近学习spring框架,对依赖注入有些模糊,遂上网翻阅资料,做了下列总结,原博客为CSDN 南夏的 spring的依赖注入是什么意思,侵删! Spring 能有效地组织J2EE应用各层的对象.不管是 ...