码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 实现下载进度条

时间:2019-03-19 17:12:41      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:content   使用   回调   turn   func   对象   jquery   res   ota   

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

 

jQuery 实现下载进度条

标签:content   使用   回调   turn   func   对象   jquery   res   ota   

原文地址:https://www.cnblogs.com/slightFly/p/10559254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!