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