jquery自带的进度条功能如何使用？

弹出进度条：先做弹出的功能modal，再做进度条显示。在弹出的界面上增加进度条功能

 $.ajax({
   xhr: function()
   {
     var xhr = new window.XMLHttpRequest();
 
     //Upload progress
     xhr.upload.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress
         console.log(percentComplete);
       }
     }, false);
 
     //Download progress
     xhr.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with download progress
         console.log(percentComplete);
       }
     }, false);
     return xhr;
   },
   type: 'POST',
   url: "/",
   data: {},
   success: function(data){
     //Do something success-ish
   }
 });

$.ajax({
        xhr : function(){
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress' ,function(e){
                    var a=e;
                    if (e.lengthComputable){
                        {#console.error(e.total);#}
                        if(file_info[0].files.length){
                            $(".progress").css("display","block");    //显示进度条
                        }
 
                        var percent = Math.round(e.loaded * 100 / e.total);
                        {#console.log(percent);#}
                        $("#progress_value").html(percent+'%');
 
                        $(".progress-bar").attr("aria-valuenow",percent).css("width",percent+"%");
                    }
                });
                return xhr;
            },
        url: '/onlineTestPerform/uploadDubbo',
        type: 'POST',
        cache: false,
        data: new FormData($('#uploadDubbo')[0]),
        processData: false,
        contentType: false
    }).done(function(res) {
         $("#progress_value").html('0%');
         $(".progress-bar").attr("aria-valuenow",0).css("width",0+"%");
         $(".progress").css("display","none");    //隐藏进度条
        if (res["success"]){
            window.location.href=res["content"];
        } else {
            $("#error_info_dubbo").html(res["content"]);
            $("#error_info_dubbo").show();
            {#console.error(res["content"]);#}
        }
    }).fail(function(res) {
         $("#progress_value").html('0%');
         $(".progress-bar").attr("aria-valuenow",0).css("width",0+"%");
         $(".progress").css("display","none");    //隐藏进度条
         $("#error_info_dubbo").html(res);
         $("#error_info_dubbo").show();
 
     });

参考：

http://www.cnblogs.com/franknihao/p/7422805.html

http://api.jquery.com/unload/

https://www.w3ctrain.com/2015/07/18/jQuery-ajax-progress/

http://malsup.com/jquery/form/progress.html

http://malsup.com/jquery/form/progress2.html

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

https://zhuanlan.zhihu.com/p/24513281?refer=flask