【js】h5上传文件增加进度条[h5js上传zip，jquery的xhr进度条，c#保存文件，c#解压]

1、上传的html

<!--上传广告图片压缩包-->
        <div class="x_content" id="ImageUpload_Zip" style="display: none; padding:10px">
            <form>
                <div class="x_panel">
                    <div class="col-md-3 col-sm-3 col-xs-3">
                        <input id="fileUpload" type="file" class="form-control" accept="application/x-zip-compressed" />
                    </div>
                </div>
                <!--进度条-->
                <div ng-show="UploadingProgressShow.per>2">
                    <div>{{UploadingProgressShow.msg}}</div>
                    <div>{{UploadingProgressShow.loaded}}/{{UploadingProgressShow.tot}}</div>
                    <div>{{UploadingProgressShow.per}}%</div>
                </div>
            </form>
        </div>

2、上传的js

            //上传广告图
            scope.Task_PlanAdvertImageUpload_Zip = function (planId) {
                scope.UploadingProgressShow = {};
                layer.open({
                    type: 1,
                    title: "上传广告图压缩包Zip",
                    content: $("#ImageUpload_Zip"),
                    area: ['70%', '40%'], //高宽
                     btn: ['保存', '取消'],
                    yes: function () {
                        scope.Task_PlanAdvertImageUpload_ZipSave(planId);
                    }
                });
            }

            //上传广告图提交
            scope.Task_PlanAdvertImageUpload_ZipSave = function (planId){
                //file类型的input
                var file = document.getElementById("fileUpload").files[0];
                if (!file) {
                    layer.msg("请选择文件");
                    return;
                }
                var form = new FormData();
                form.append('file', file);
                form.append("planId", planId);
                layer.msg("正在上传");
                layer.load();

                //请求 
                $.ajax({
                    type: "POST",
                    url: "Task_PlanAdvertImageUpload_Zip",
                    processData: false,
                    contentType: false,
                    data: form,
                    xhr:function(){
                        var xhr = $.ajaxSettings.xhr();
                        if(scope.UploadingProgressBack && xhr.upload) {
                            xhr.upload.addEventListener("progress" , scope.UploadingProgressBack, false);
                            return xhr;
                        }
                    },
                    success: function (res) {
                        if (res.RetCode == 0) {
                            scope.UploadingProgressShow.msg = "保存成功";
                            layer.closeAll();
                        } else {
                            scope.UploadingProgressShow.msg= res.RetMsg;
                        }
                        layer.msg(res.RetMsg);
                    },
                });
            }

            //上传进度
            scope.UploadingProgressBack = function (evt){
                var loaded = evt.loaded;     //已经上传大小情况
                var tot = evt.total;      //附件总大小
                var per = Math.floor(100*loaded/tot);  //已经上传的百分比
                scope.$apply(function () {
                    //写在$apply内才ng重新渲染
                    if (per >= 100) {
                        scope.UploadingProgressShow = {
                            loaded, tot, per,
                            msg: '上传成功，正在解压',
                        };
                    } else {
                        scope.UploadingProgressShow = {
                            loaded, tot, per,
                            msg: '正在上传',
                        };
                    }
                });
               
            }

3、服务器接收

/// <summary>
        /// 上传广告图压缩包
        /// </summary>
        /// <param name="planId"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Task_PlanAdvertImageUpload_Zip(Guid planId)
        {
            var data = OperateContext.Current.Execute<int>(rm =>
            {
                HttpFileCollectionBase files = HttpContext.Request.Files;
                if (files != null && files.Count == 1)
                {
                    HttpPostedFileBase file = files[0];
                    if (file != null && !string.IsNullOrWhiteSpace(file.FileName) && file.FileName.EndsWith(".zip"))
                    {
                        var acc = UserAccount.Instance().GetUserInfo();
                        OperateContext.Current.BLLSession.ITask_StagePlanInfoBLL.Task_PlanAdvertImageUpload_Zip(file.InputStream, planId);
                        OperateContext.Current.BLLSession.ISys_AccountLogBLL.AddLog(acc.AccountId, acc.Name, LogTypeEnum.普通, "上传广告图压缩包" + planId);


                        rm.RetCode = 0;
                        rm.RetMsg = "保存完成";
                    }
                    else
                    {
                        rm.RetCode = 1;
                        rm.RetMsg = "上传的文件格式错误";
                    }
                }
                else
                {
                    rm.RetCode = 1;
                    rm.RetMsg = "未选择文件";
                }

            });
            return Json(data); 
        }

4、保存zip

/// <summary>
        /// 上传广告图文件压缩包
        /// </summary>
        /// <param name="stream"></param>
        public void Upload_PlanAdvertImageUpload_Zip(Stream stream) 
        {
            try
            {
                //压缩包路径
                var path =  GetAdvertImageZipDirectory();
                string decompressionName = planNumber + ".zip";
                string filePath = path + "/" + decompressionName;

                if (!Directory.Exists(path))
                { 
                    Directory.CreateDirectory(path);
                }
                if (File.Exists(filePath))
                {
                    //覆盖
                    File.Delete(filePath);
                }
                
                StreamToFile(stream, filePath);
            }
            catch (GeneralException ge)
            {
                throw ge;
            }
            catch (Exception ge)
            {
                throw ge;
            }
            finally
            {
                if (stream!=null) stream.Close();
            }
        }


        public void StreamToFile(Stream stream, string fileName)
        {
            // 把 Stream 转换成 byte[]
            byte[] bytes = new byte[stream.Length];
            stream.Read(bytes, 0, bytes.Length);

            // 设置当前流的位置为流的开始
            stream.Seek(0, SeekOrigin.Begin);

            // 把 byte[] 写入文件
            FileStream fs = new FileStream(fileName, FileMode.Create);
            BinaryWriter bw = new BinaryWriter(fs);
            bw.Write(bytes);
            bw.Close();
            fs.Close();
        }

5、解压

public  void Decompression()
        {
            //压缩包路径
            string path = GetAdvertImageZipDirectory();
            string decompressionName = planNumber + ".zip";
            string filePath = path + "/" + decompressionName;
            if (File.Exists(filePath))
            {
                //解压
                try
                {
                    if (!FileHelper.DecompressFile(filePath, root+GetPath_AdvertImageDirectory()))
                    {
                        //失败、、
                        return;
                    }

                    ////解压完成后删除
                    //File.Delete(filePath);

                    //移动解压过的压缩包，不会再被捕获
                    string moveToPath = path + "/Back/" + DateTime.Now.ToString("yyyyMMddHHmmss");
                    if (!Directory.Exists(moveToPath))
                    {
                        Directory.CreateDirectory(moveToPath);
                    }
                    moveToPath += "/" + decompressionName;
                    if (File.Exists(moveToPath))
                    {
                        return;
                    }
                    File.Move(filePath, moveToPath);
                }
                catch (Exception ex)
                {
                    LogHelper.Instance.Error("解压广告图片压缩包异常" + filePath, ex);
                }
            }
        }