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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索nodejs
, 进度条
, 上传进度条
兼容ie8的进度条
nodejs 上传进度条、nodejs控制台进度条、nodejs 进度条、node 进度条、nodejs fs 进度条,以便于您获取更多的相关知识。

时间: 2024-08-04 12:30:18

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

js HTML5 Ajax实现文件上传进度条功能_javascript技巧

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

asp.net 文件上传进度条实现代码

asp教程.net 文件上传进度条实现代码 index.htm就是文件上传页面,提交form给uploadhandler目录下的default.aspx,以实现文件上传. progresshandler目录下三个文件为abort.ashx.genericguid.ashx,handler.ashx功能分别为:根据guid取消正在上传的文件,生成guid,根据guid获取上传信息. 第一步:建立index.htm页面,这个上传页面,需要注意的就是需要一个隐藏的iframe,并且名字为form提交的

jQuery实现简单的文件上传进度条效果_jquery

本文实例讲述了jQuery实现文件上传进度条效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href=&quo

服务器-我这样做asp.net异步文件上传进度条

问题描述 我这样做asp.net异步文件上传进度条 前台两个请求 1.上传文件的请求 2.获取上传进度的请求 1. $("#ufrm").ajaxSubmit({ url: "ReceivFile.ashx", type: "post", success: function (data) { ... 2. $.ajax({ type: "post", url: "Filepro.aspx", data: {

HTML5 Ajax文件上传进度条如何显示_AJAX相关

原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制.  <constant name="struts.multipart.maxSize" value="52428800"/>这个配置

PHP利用APC模块实现文件上传进度条的方法_php技巧

本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在

php ajax实现文件上传进度条_php技巧

本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下. 本实例有两个文件: upload_form.html: <!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1"

PHP中使用Session配合Javascript实现文件上传进度条功能_php技巧

Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

PHP Session和Javascript实现文件上传进度条

在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足在于,它需要安装PHP的APC扩展库,要求用户能够控制服务器端的配置.另外,如果安装APC仅仅是为了实现一个上传进度条,那么显然有点杀鸡用牛刀的意思. 第三