jQuery 实现下载进度条

Posted 2021-02-13 SlightFly

//ajax异步上传  
            $.ajax({  
               url: "${pageContext.request.contextPath }/upload",  
               type: "POST",  
               data: 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){  
                   $("#result").html(result);  
               },  
               contentType: false, //必须false才会自动加上正确的Content-Type  
               processData: false  //必须false才会避开jQuery对 formdata 的默认处理  
           });  

//上传进度回调函数：  
       function progressHandlingFunction(e) {  
           if (e.lengthComputable) {  
               $(‘#progress‘).attr({value : e.loaded, max : e.total}); //更新数据到进度条  
               var percent = e.loaded/e.total*100;  
               $(‘#progress‘).html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");  
               $(‘#progress‘).css(‘width‘, percent.toFixed(2) + "%");
           }  
       }