首页 > 语言 > JavaScript > 正文

Node.js实现兼容IE789的文件上传进度条

2024-05-06 14:52:06
字体:
来源:转载
供稿:网友

Nodejs对文件上传的处理

在Express4里req.files已经是undefined了;现在用的最多的可能就是formidable了,你知道了它有个progress事件,于是心中大喜,低版本IE的进度条有戏了;OK,试一下:

 form  .on('error',function(err){   console.log(err); })  .on('aborted',function(){   console.log('aborted');  }) .on('progress',function(bytesReceived, bytesExpected){   var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);   console.log(n);  });

是的,你很高兴的看到了,控制台按照预期打印了一串进度值;那么,再进一步;

 form  .on('progress',function(bytesReceived, bytesExpected){   var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);   res.write('<script>window.parent.call('+n+')</script>');   //无刷新上传,你们懂的 console.log(n);  });

call方法即在页面上显示进度值;很不幸,你只能看到最后的100%,看不到上传具体详细的进度值;再探...

接下来换个思路,试一下,将进度值保存到session里,额外加一个请求来轮询这个进度值,哎哟,不错哦!为了保证你请求的进度值是你这次上传的进度值而不是其他上传的进度值,需要在上传的请求里和额外的请求里约定一个token值;现在又来一个问题就是怎么在请求的时候得到这个token,由于文件上传的请求体在Request Payload里,所以req.body拿不到带过去的值,我也不想去解析这堆了,当然我也解析不了;放在url里最好,问题在于有时候得刷新两次来刷新token,不好!不得已,我还是放在cookie里吧!

 var cookies=function () {   var cks=req.headers.cookie.split(';'),obj={};   for(var i=0;i<cks.length;i++){    obj[cks[i].split('=')[0].replace(//s+/ig,'')]=unescape(cks[i].split('=')[1]);   }   return obj;  }();  var queryToken=cookies.__token__;  form .on('progress',function(bytesReceived, bytesExpected){   var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);   if (req.session['file'+queryToken]) {     req.session['file'+queryToken].percent=n;   }else{    req.session['file'+queryToken]={     token:queryToken,     percent:n    }   };   console.log(n);  });

为了IE789,我来轮询进度值了,原谅我,其实我的心很痛;

 var getData=function(){   $.post('/uploader',{    getfileinfo:1,    uploadtoken:utils.cookie.getCookie('__token__')   })  .then(function(data){    console.log(data);   if (data.mes<0) {     getData();    }else{     var pros=data.info;     call(pros.percent);    if (pros.percent!='100') {      getData();     };    };   });  }  getData();
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选