jquery自帶的進度條功能如何使用？

彈出進度條：先作彈出的功能modal，再作進度條顯示。在彈出的界面上增長進度條功能

 

 1 $.ajax({
 2   xhr: function()
 3   {
 4     var xhr = new window.XMLHttpRequest();
 5     
 6     //Upload progress
 7     xhr.upload.addEventListener("progress", function(evt){
 8       if (evt.lengthComputable) {
 9         var percentComplete = evt.loaded / evt.total;
10         //Do something with upload progress
11         console.log(percentComplete);
12       }
13     }, false);
14     
15     //Download progress
16     xhr.addEventListener("progress", function(evt){
17       if (evt.lengthComputable) {
18         var percentComplete = evt.loaded / evt.total;
19         //Do something with download progress
20         console.log(percentComplete);
21       }
22     }, false);
23     return xhr;
24   },
25   type: 'POST',
26   url: "/",
27   data: {},
28   success: function(data){
29     //Do something success-ish
30   }
31 });

 

$.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