XMLHttpRequest 分割上传文件显示进度

 

 xhr = new XMLHttpRequest();

 var clock = null;

 

 //file选择，触发定时器函数

 function upload(){

     clock = window.setInterval(selectfile,1000);

     //定时1s

 }

 

 //闭包函数

 var selectfile = (function(){

 

     const LENGTH = 1*1024*1024;//每次截取的长度

     var sta = 0;                //从零处开始截取

     var end = sta +LENGTH;

     var flag = false;    //表示上一块是否发送完毕

     var blob = null;

     var fd = null;

     var percent = 0;

 

         //匿名函数

     return(function (){

 

         if(flag == true){　　　　//是否正在上传

             return;

         }

         flag = true;

         var mov = document.getElementById('pdfFile').files[0];/* blob对象 */

 

 var proId=document.getElementById('projectId').value;

         

         fd = new FormData();

         blob = mov.slice(sta,end);

         fd.append('pdfFile',blob);

 fd.append('proId',proId);

         up(fd);

 

         //如果sta > mov.size 就结束

         if(sta >= mov.size){

             clearInterval(clock);    //清除定时

             return ;

         }

         sta = end;

         end = sta + LENGTH;

         flag = false;    //上传完毕

         

         percent = 100 * end /mov.size ;

         percent = percent >= 100 ? 100 : percent;

 

         percent=percent.toFixed(2);

 

        var son =  document.getElementById('son');  

         son.innerHTML = percent+"%";  

         son.style.width=percent+"%";  

 

     });

 })();

 

 

 

function up(fd){

 

    xhr.open("post","<?= site_aurl($tablefunc.'/upload') ?>",false);  

    xhr.send(fd);

}