ajax 上傳文件，顯示進度條，進度條100%，進度條隱藏，出現卡頓就隱藏進度條，顯示正在加載，再顯示上傳完成

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="uploadfiles" name="file" multiple="multiple" style="display:none" accept="aplication/zip">
</form>

<!-- 導入文件滾動條窗口 -->
<div class="modal fade" id="progressbar" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" data-backdrop="false" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content" style="padding-top:10px;">
            <div class="modal-body" style="color:black;">
                上傳進度：<progress style="width:30em;"></progress>
                <p id="info" style="margin-top:10px"></p>

            </div>

        </div>
    </div>
</div>

<div class="btn-group">
            <a class="btn btn-primary dropdown-text" authorize="yes" onclick="$('#uploadfiles').click()" id="Import" title="可以選擇多個文件同時上傳"><i class="fa fa-plus"></i>批量上傳</a>
        </div>

 

js 

 var totalSize = 0;
    //綁定所有type=file的元素的onchange事件的處理函數
    $('#uploadfiles').change(function eventStart() {
        var fileQty = this.files.length;
        if (fileQty == 0) {
            return;
        }
        else {
            var unvalidFiles = [];
            $(this.files).each(
                function (index, file) {
                    var filename = file.name;
                    //type = file.type; ini文件獲取擴展名為空
                    var extIndex = filename.lastIndexOf(".");
                    var ext = filename.substring(extIndex + 1);//擴綴名
                    if (ext != 'zip') {
                        unvalidFiles.push(filename);
                    }
                    var size = file.size;
                    totalSize += size;
                });
            if (unvalidFiles.length > 0) {
                $('#uploadfiles').val("");
                $.modalAlert('存在非zip文件，請重新選擇', 'error');
                return;
            }
            else {
                $("#info").html("已上傳/總大小： " + '0KB/' + Math.ceil(totalSize / 1000) + "KB");
                $("#progressbar").modal();
             
                doUpload("/NGS/Report/Upload");    
            }

        }

    });

//上傳文件
function doUpload(url) {
    //創建FormData對象，初始化為form表單中的數據。需要添加其他數據可使用formData.append("property", "value");
    var formData = new FormData($('form')[0]);
    //formData.append("DataType", DataType);
    //ajax異步上傳
    $.ajax({
        url: url,//"/NGS/Report/Upload",
        type: "POST",
        cache: false,
        data: formData,
        dataType: 'json',     
        contentType: false, //必須false才會自動加上正確的Content-Type
        processData: false, //必須false才會避開jQuery對 formdata 的默認處理
        xhr: function () { //獲取ajaxSettings中的xhr對象，為它的upload屬性綁定progress事件的處理函數
            myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { //檢查upload屬性是否存在
                //綁定progress事件的回調函數
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr; //xhr對象返回給jQuery使用
        },
        success: function (result, status, xhr) {
            $("#progressbar").hide();
            $('#uploadfiles').val("");
            $("#progressbar").modal('hide');
            if (result.state == "error") {
                console.log(result1);
                var err = '<textarea style="width:430px;height:294px;outline:none;resize:none;">有部分文件導入失敗，請檢查原因：\r\n';               
                $.each(result.data, function (index, item) {

                   // err += index + 1 + '、文件名：' + item.file + ' 錯誤：' + item.error + '\r\n';
                    err += index + 1 + '、文件名：' + item + '\r\n';

                });

                content = err + '</textarea>';
                top.layer.alert(content, {
                    icon: 'fa-times-circle',
                    title: "系統提示",
                    area: ['550px', '450px'],
                    btn: ['確認'],
                    btnclass: ['btn btn-primary']
                });
            }
            else { 
                $.currentWindow().$("#gridList").trigger("reloadGrid");
                $.modalMsg('上傳文件成功', 'success');
                $('#loadingPage', parent.document).css("display", "none");
            }
           
        },       
        error: function (XMLHttpRequest, textStatus, error) {          
            $('#uploadfiles').val("");
            $("#progressbar").modal('hide');
            $.modalMsg(error, 'error');//報錯：
        },
    });
}

//上傳進度回調函數：
function progressHandlingFunction(e) {
    total = Math.ceil(e.total / 1000);
    if (e.lengthComputable) {
        loaded = Math.ceil(e.loaded / 1000);
        $('progress').attr({ value: loaded, max: total }); //更新數據到進度條
        var percent = loaded / total * 100;
        $('#info').html(loaded + "/" + total + " KB " + "<span>" + percent.toFixed(2)+"</span>" + "%");
    }
    var infoV = $("#info span").html();
    if (infoV == 100.00) {
        $("#progressbar").hide();
        $('#loadingPage', parent.document).css("display", "block");
        $('#loadingPage .loading-content', parent.document).html("數據處理中，請稍后…");
       
    }
   
}