Html上传大文件

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/Scripts/jquery-1.11.1.min.js"></script>
    <script src="~/Scripts/vue.min.js"></script>
    <script>
        //记录文件上传状态，如果文件上传完成则为false  否则为true
        var upType = false;


         function upload() {
            var file = $("#file")[0].files[0], //文件对象
                name = file.name,       //文件名
                size = file.size,       //总大小
                succeed = 0;
         
             name = guid() +"."+name.replace(/.+\./, "")

            var shardSize = 2 * 1024 * 1024,    //以2MB为一个分片
                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);       //当前是第几片
                var pro = document.getElementById("pro");
                pro.max = shardCount;
                console.log("index", i);
                //Ajax提交
                $.ajax({
                    url: "/WebApplication1/Home/GoToUpload/",
                    type: "POST",
                    data: form,
                    async: true,        //异步
                    processData: false,
                    contentType: false,
                    success: function () {
                        ++succeed;
                        var pro = document.getElementById("pro");
                        pro.value = succeed;
                        var num = (succeed / shardCount) * 100;
                      
                        //展示上传的百分比
                        $("#output").text(num.toFixed(2) + "%");
                        $("#div").html(num.toFixed(2) + "%");
                        if (succeed == shardCount) {

                        }

                    }
                });
            }
        }
       
        //生成随机 GUID 数
        function guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
    </script>

</head>
<body>
    <div id="app">
        <input type="file" id="file" />
        <div id="div"></div>
        <progress id="pro" value="0"></progress>
        <span id="output" style="font-size: 15px">等待</span><br>
        <button type="button" onclick="upload()" class="btn btn-primary">上传资源</button><br />
        <input type="hidden" id="path" />
    </div>
</body>
</html>

 public JsonResult GoToUpload()
        {
            //从Request中取参数，注意上传的文件在Requst.Files中
            string name = Request["name"];
            int total = Convert.ToInt32(Request["total"]);
            int index = Convert.ToInt32(Request["index"]);
            var data = Request.Files["data"];

            string dirTemplete = Server.MapPath("~/Upload/Template/");
            string file = Path.Combine(dirTemplete, name + "_" + index);
            data.SaveAs(file);
            int files = GetFilesNum(dirTemplete, name);
            if (files == total)
            {
                try
                {
                    string dir = Server.MapPath("~/Upload/File/");
                    string newFile = Path.Combine(dir, name);
                    using (var fs = new FileStream(newFile, FileMode.Create))
                    {
                        for (int i = 1; i <= total; ++i)
                        {
                            string part = Path.Combine(dirTemplete, name + "_" + i);
                            var bytes = System.IO.File.ReadAllBytes(part);
                            fs.Write(bytes, 0, bytes.Length);
                            bytes = null;
                            System.IO.File.Delete(part);
                        }
                    }


                }
                catch (Exception ex)
                {
                    string a = ex.Message;
                }
            }
            //返回是否成功，此处做了简化处理
            return Json(new { Error = 0 });
        }

        public int GetFilesNum(string path, string fileName)
        {
            DirectoryInfo root = new DirectoryInfo(path);
            FileInfo[] files = root.GetFiles();
            List<string> listFile = new List<string>();
            foreach (var item in files)
            {
                if (item.Name.Split('.')[0].ToLower() == fileName.Split('.')[0].ToLower())
                {
                    listFile.Add(item.Name);
                }
            }

            return listFile.Count();
        }

posted on 2018-01-30 21:41 高兴happy 阅读(236) 评论(0) 收藏举报