上傳文件進度條（筆記）

參考資料：CSDN-真實的上傳進度條

<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module">
    <label class='col-sm-2 control-label'>上傳進度：</label>
    <div class='col-sm-10'>
        <div class="progress">
            <div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" >
            </div>
        </div>
        <span id="percentage"></span><span id="time"></span>
    </div>
</div>

        var ot;
        var oloaded;
        function save() {
            var form = new FormData();
            var file = document.querySelector('input[type=file]').files[0];
            form.append('logo', file); //angular 上傳的文件必須使用特殊的格式處理，不是json格式
            var xhr;
            xhr = new XMLHttpRequest();  // XMLHttpRequest 對象
            xhr.open("post", webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", true); //post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。
            xhr.onload = uploadComplete; //請求完成
            xhr.onerror = uploadFailed; //請求失敗

            xhr.upload.onprogress = progressFunction;//【上傳進度調用方法實現】
            xhr.upload.onloadstart = function () {//上傳開始執行方法
                ot = new Date().getTime();   //設置上傳開始時間
                oloaded = 0;//設置上傳開始時，以上傳的文件大小為0
            };
            xhr.send(form); //開始上傳，發送form數據
        };

        //上傳成功響應
        function uploadComplete(evt) {
            //服務斷接收完文件返回的結果
            var response = JSON.parse(evt.target.responseText);
            if (response.mark) //接口返回的數據標志位，是否保存成功，保存成功則把文件相對地址更新到實體中
                $scope.editdata.SourceURL = response.result;
            $('#txtSourceURL').click();//手動觸發點擊事件，刷新文本框的值
        }
        //上傳失敗
        function uploadFailed(evt) {
            toaster.pop('error', "上傳失敗");
        }

        //上傳進度實現方法，上傳過程中會頻繁調用該方法
        function progressFunction(evt) {
            // event.total是需要傳輸的總字節，event.loaded是已經傳輸的字節。如果event.lengthComputable不為真，則event.total等於0
            if (evt.lengthComputable) {
                $("#myModal_add_progressBar").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
                $("#myModal_add_progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%");
                $("#percentage").html("已上傳" + Math.round(evt.loaded / evt.total * 100) + "%");
            }
            var nt = new Date().getTime();//獲取當前時間
            var pertime = (nt - ot) / 1000; //計算出上次調用該方法時到現在的時間差，單位為s
            ot = new Date().getTime(); //重新賦值時間，用於下次計算
            var perload = evt.loaded - oloaded; //計算該分段上傳的文件大小，單位b
            oloaded = evt.loaded;//重新賦值已上傳文件大小，用以下次計算
            //上傳速度計算
            var speed = perload / pertime;//單位b/s
            var bspeed = speed;
            var units = 'b/s';//單位名稱
            if (speed / 1024 > 1) {
                speed = speed / 1024;
                units = 'k/s';
            }
            if (speed / 1024 > 1) {
                speed = speed / 1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余時間
            var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
            $("#time").html('，速度：' + speed + units + '，剩余時間：' + resttime + 's');
        }