zoukankan      html  css  js  c++  java
  • Html5 突破微信限制实现大文件分割上传

    先来前端代码

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



  • 相关阅读:
    Binary Search Tree Iterator 解答
    Invert Binary Tree 解答
    Min Stack 解答
    Trapping Raining Water 解答
    Candy 解答
    Jump Game II 解答
    Implement Hash Map Using Primitive Types
    Gas Station 解答
    Bucket Sort
    HashMap 专题
  • 原文地址:https://www.cnblogs.com/letnet/p/8525097.html
Copyright © 2011-2022 走看看