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



  • 相关阅读:
    javaSE基础(三)
    javaSE基础(二)
    javaSE基础(一)
    文件目录爬虫
    前自增 与 后自增
    查找 与 排序 总结
    python 使用 grpc
    python3.7 安装 uwsgi
    go
    go
  • 原文地址:https://www.cnblogs.com/letnet/p/8525097.html
Copyright © 2011-2022 走看看