Html上传大文件

1、

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

  

2、

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

  

原文地址:https://www.cnblogs.com/happygx/p/8387506.html