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