华山资源网

Node.js实现兼容IE789的文件上传进度条
网络编程 2024/11/15 佚名
3 1

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文件要好很多。以上就是这篇文章的全部内容，希望能够对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com