Html上传大文件

 

一、

 

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

 

//记录文件上传状态，若是文件上传完成则为false  不然为true
    var upType = false;


    var page = {
        init: function () {
            $("#upload").click($.proxy(this.upload, this));
        },

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

                succeed = 0;
            //从新定义文件的名字，放置重复
            var path = $("#path").val();
            $("#path").val(path + "." + name.replace(/.+\./, ""));
            name = $("#path").val();
            alert(name);
            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;


                //Ajax提交
                $.ajax({
                    url: "/Product/UpfileProductResources/" + $("#hidProductId").val(),
                    type: "POST",
                    data: form,
                    async: true,         //异步
                    processData: false,  //很重要，告诉jquery不要对form进行处理
                    contentType: false,  //很重要，指定为false才能造成正确的Content-Type
                    success: function () {
                        ++succeed;
                        pro.value = succeed;
                        var num = (succeed / shardCount) * 100;
                        //展现上传的百分比
                        $("#output").text(num.toFixed(2) + "%");
                        if (succeed == shardCount) {
                            upType = true;
                        }

                    }
                });
            }
        }
    };
    $(function () {
        page.init();
    });

　　

二、

 

/// <summary>
        /// 上传产品资源
        /// </summary>
        /// <param name="id">产品Id</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UpfileProductResources(string id)
        {
            //从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 path = ConfigurationManager.AppSettings["UpPath"].ToString();
            //产品资源
            string serviceLocation = "/Upload/UploadFiles/Product/Resource/";
            //保存一个分片到磁盘上
            string dir = PublicLibrary.Public.Files.CreatePath(path + serviceLocation);

            //保存一个分片到磁盘上
            // string dir = Server.MapPath("~/Upload");
            string file = Path.Combine(dir, name + "_" + index);
            data.SaveAs(file);

            //若是已是最后一个分片，组合
            //固然你也能够用其它方法好比接收每一个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
            if (index == total)
            {
                file = Path.Combine(dir, name);
                var fs = new FileStream(file, FileMode.Create);
                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);
                }

                fs.Close();
            }

            //返回是否成功，此处作了简化处理
            return Json(new { Error = 0 });

            // return json;
        }