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

 更新时间:2016年09月02日 11:50:51   投稿:daisy  
这篇文章给大家介绍了如何实现兼容IE789的文件上传进度条,如果你的工作用过上传图片或上传大文件啥的,一般在IE低版本浏览器里,会切换到用flash解决,可是有些人肯定不会为了老旧IE的进度条而去学flash,那么下面来一起看看吧。

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();

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

好吧,我又一次沦陷了;不过还是感觉不对劲,ajax轮询没有问题,问题在于session里要等到上传完毕才有值,所以只能看到100%,看不到详细进度值;我是否可以认为,在progress里,之前的res.write和这次的req.session被挂起了呢,但是它又保存了每次的执行结果,直到progress完再释放,所以只能看到100%;没心情看formidable的源码,当然我也看不咋懂,我就先这么认为吧!

既然ajax轮询没问题,那么就是保存到session不得劲了;实在不成,放到global里试试吧,总不会往全局对象里塞个值也会挂起吧;稍作改动放到global里:

 form 
 .on('progress',function(bytesReceived, bytesExpected){ 
  var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
  if (global['file'+queryToken]) { 
   global['file'+queryToken].percent=n; 
  }else{ 
   global['file'+queryToken]={ 
    token:queryToken, 
    percent:n 
   } 
  }; 
  console.log(n); 
 });

继续轮询。

漂亮,完全就是那么回事!在chrome里看到的和HTML5的进度一个效果,只是在IE789里会有点卡顿的感觉,不过还是能看到详细的进度值的;毕竟老浏览器身子骨不咋地,你们懂的;还有,每次上传都往global里塞值,怎么也得适当的清理一下吧,文件上传完毕,转移到指定目录后global['file'+queryToken]=null

然而,轮询,就是一个接一个好多好多的请求,这里也许会出问题;要不限制一下吧,间隔500ms请求一次进度值;恩,IE789进度条就这么解决了,说好的丢掉flash;虽然这个轮询可以兼容所有浏览器,但毕竟要浪费那么多请求,还是判断下,在IE789以外继续HTML5吧!

其实衡量一下,额外加个flash上传和额外的请求,哪个更值呢,原谅我不懂flash,就不多说了,反正我很不喜欢在页面上加一下额外的文件;

总结

关于文件上传的组件,还有很多的细节处理,本想弄一个JS文件的,后来一想,为了可复用性更强,还是作为一个独立的页面搞比较好,需要上传的地方,iframe一下就行了,肯定比弄一个JS文件要好很多。以上就是这篇文章的全部内容,希望能够对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • socket.io与pm2(cluster)集群搭配的解决方案

    socket.io与pm2(cluster)集群搭配的解决方案

    这篇文章主要给大家介绍了关于socket.io与pm2(cluster)集群搭配的解决方案,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。
    2017-06-06
  • Node.JS获取GET,POST数据之queryString模块使用方法详解

    Node.JS获取GET,POST数据之queryString模块使用方法详解

    本文将详细介绍nodeJS中的queryString模块使用方法,包括Node.JS获取GET,POST数据的方法,需要的朋友可以参考下
    2020-02-02
  • NestJS实现接口的多版本管理

    NestJS实现接口的多版本管理

    在软件开发中,随着应用的迭代更新,经常需要引入新的接口版本同时保留旧版本以保证向后兼容,本教程将通过 NestJS 框架演示如何实现接口的多版本管理,感兴趣的小伙伴跟着小编一起来看看吧
    2024-06-06
  • Node.js中Process.nextTick()和Process.setImmediate()的区别

    Node.js中Process.nextTick()和Process.setImmediate()的区别

    这篇文章介绍了Node.js中Process.nextTick()和Process.setImmediate()的区别,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • 详解nodejs中express搭建权限管理系统

    详解nodejs中express搭建权限管理系统

    本篇文章主要介绍了详解express搭建权限管理系统,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • node.js中的fs.fchmodSync方法使用说明

    node.js中的fs.fchmodSync方法使用说明

    这篇文章主要介绍了node.js中的fs.fchmodSync方法使用说明,本文介绍了fs.fchmodSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node.js 全局变量无法挂载问题解决分析

    Node.js 全局变量无法挂载问题解决分析

    这篇文章主要为大家介绍了Node.js 全局变量无法挂载问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • nodejs 快速入门之事件循环

    nodejs 快速入门之事件循环

    这篇文章主要介绍了nodejs 快速入门之事件循环的相关资料,需要的朋友可以参考下
    2023-05-05
  • node故障定位顶级技巧动态追踪Dynamic Trace详解

    node故障定位顶级技巧动态追踪Dynamic Trace详解

    这篇文章主要为大家介绍了node故障定位顶级技巧动态追踪Dynamic Trace详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Node.js学习教程之Module模块

    Node.js学习教程之Module模块

    这篇文章主要给大家介绍了关于Node.js学习教程之Module模块的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09

最新评论