jQuery 實現下載進度條


//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) + "%");
           }  
       } 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM