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("数据处理中，请稍后…");

    }

}