jQuery 实现下载进度条

Posted SlightFly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) + "%");
           }  
       } 

 

以上是关于jQuery 实现下载进度条的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 实现下载进度条

javascript使用ajax下载文件进度条实现

java 做进度条 ajax实现 js jquery ext 都可以需要具体实现过程和代码 需要读取数据

星球大战jQuery水平进度条特效

使用jquery.form.js实现文件上传及进度条前端代码

用jquery实现进度条效果