先来前端代码

<!DOCTYPE html>

<html>

<head>

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

    <title>大文件分割上传</title>

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

    <script>

        var page = {

            init: function () {

                $("#subUpload").click($.proxy(this.upload, this));

            },

            upload: function () {

                var file = $("#fileUpload")[0].files[0],  //文件对象

                    name = file.name,        //文件名

                    size = file.size,        //总大小

                    succeed = 0;

                var shardSize = 290 * 1024,    //以290kb为一个分片,换算1MB=1 * 1024 * 1024

                    shardCount = Math.ceil(size / shardSize);  //总片数

                for (var i = 0; i < shardCount; ++i) {

                    //计算每一片的起始与结束位置

                    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("name", name);

                    form.append("total", shardCount);  //总片数

                    form.append("index", i + 1);        //当前是第几片

                    //Ajax提交

                    $.ajax({

                        url: "../Upload/SaveFile2",

                        type: "POST",

                        data: form,

                        async: true,        //异步

                        processData: false,  //很重要，告诉jquery不要对form进行处理

                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type

                        success: function () {

                            ++succeed;

                            $("#output").text(succeed + " / " + shardCount);

                        }

                    });

                }

            }

        };

        $(function () {

            page.init();

        });

    </script>

</head>

<body>

    <div>

        <input id="fileUpload" name="fileUpload" type="file" /><br />

        <button id="subUpload" type="submit">提交</button><br />

        <span id="output" style="font-size:12px">等待</span>

    </div>

</body>

</html>

再来C#版后台代码

        public ActionResult SaveFile2()

        {

            string name = Request["name"];

            int total = Convert.ToInt32(Request["total"]);

            int index = Convert.ToInt32(Request["index"]);

            var data = Request.Files["data"];

            string dir = Server.MapPath("/UploadFile/Imgs/");

            if (!Directory.Exists(dir))

            {

                Directory.CreateDirectory(dir);

            }

            string file = Path.Combine(dir, name + "_" + index);

            data.SaveAs(file);

            string[] files = Directory.GetFiles(dir);

            bool isMerge = true;

            for (int i = 1; i <= total; ++i)

            {

                string part = Path.Combine(dir, name + "_" + i);

                if (!files.Contains(part))

                {

                    isMerge = false;

                }

            }

            if (isMerge)

            {

                file = Path.Combine(dir, name);

                var fs = new FileStream(file, FileMode.Create);

                try {

                    for (int i = 1; i <= total; ++i)

                    {

                        string part = Path.Combine(dir, name + "_" + i);

                        var bytes = System.IO.File.ReadAllBytes(part);

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

                        bytes = null;

                        System.IO.File.Delete(part);

                    }

                }

                finally

                {

                    fs.Close();

                }

            }

            //返回是否成功，此处做了简化处理

            return Json(new { Error = 0 });

        }

Html5 突破微信限制实现大文件分割上传的更多相关文章

  1. PHP + JS 实现大文件分割上传

    服务器上传文件会有一定的限制.避免内存消耗过大影响性能,在 php.ini 配置文件中,有几个影响参数: upload_max_filesize = 2M //PHP最大能接受的文件大小 post_m ...

  2. formdata方式上传文件，支持大文件分割上传

    1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...

  3. android下大文件分割上传

    由于android自身的原因,对大文件(如影视频文件)的操作很容易造成OOM,即:Dalvik堆内存溢出,利用文件分割将大文件分割为小文件可以解决问题. 文件分割后分多次请求服务. //文件分割上传 ...

  4. PHP大文件分割上传（分片上传）

    服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收 ...

  5. PHP实现大文件分割上传与分片上传

    转载:http://www.zixuephp.com/phpstudy/phpshilie/20170829_43029.html 服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 u ...

  6. js大文件分割上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. PHP大文件分片上传的实现方法

    一.前言 在网站开发中,经常会有上传文件的需求,有的文件size太大直接上传,经常会导致上传过程中耗时太久,大量占用带宽资源,因此有了分片上传. 分片上传主要是前端将一个较大的文件分成等分的几片,标识 ...

  8. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  9. 使用webuploader组件实现大文件分片上传，断点续传

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

随机推荐

  1. css和js带参数v或version

    1 <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?versi ...

  2. asp 文章内容里的图片宽度过大 撑爆页面布局 解决办法

    有时候帮朋友做做企业网站,还是asp+access来的快,也经济(不用开数据库空间),fck做的后台内容编辑功能,但是他们传图片的时候不靠谱,图片不管有多宽都直接up上来,把前台页面撑的是面目全非! ...

  3. PHP7 关于变量的基本判断

    刚学 PHP ,一些基础还不太牢固,边实践边记录. about NULL $class_name = null; 语句结束后,$class_name 是空,没有,什么都没有的“空”.用 is_null ...

  4. HDU - 5686-Problem B (递推+高精）

    度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种不同的序列. Input 这里包括多组测 ...

  5. ZQUOJ 22854 (优先队列+剪枝）

    题目:给出K , N , M   :  N为顶点数 , M为边数  : 求K个从1到N的不重复的最短边 , 可以来回的走: 分析:很自然的就可以想到用个优先队列广收下K次终点嘛 , 但是.0.0 爆了 ...

  6. HDU6311 Cover (欧拉路径->无向图有最少用多少条边不重复的路径可以覆盖一个张无向图)

    题意:有最少用多少条边不重复的路径可以覆盖一个张无向图 ,输出每条路径的边的序号 , 如果是反向就输出-id. 也就是可以多少次一笔画的方式画完这个无向图. 题解:我们已知最优胜的情况是整个图是欧拉图 ...

  7. BZOJ - 4260 01字典树+前后缀

    题意:给定\(a[1...n]\),求\((a_i⊕a_i+1⊕...⊕a_j)+(a_p⊕a_{p+1}⊕...⊕a_{q})\)的最大值,其中\(1≤i≤j<p≤q≤n\) 前后缀最优解预处 ...

  8. [转] JavaScript中的Truthy和Falsy介绍

    [From] http://www.jb51.net/article/59285.htm 与大多数编程语言一样,JavaScript中存在boolean类型,以供逻辑判断使用.不过,和很多其它编程语言 ...

  9. 前后端分离和restful开发规范

    一.web开发的两种模式 1.前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比 ...

  10. 协程:gevent模块,遇到i/o自动切换任务 038

    协程 : gevent模块,遇到io自动切换任务 from gevent import monkey;monkey.patch_all() # 写在最上面 这样后面的所有阻塞就全部能够识别了 impo ...