Node.js實現(xiàn)兼容IE789的文件上傳進度條

更新時間：2016年09月02日 11:50:51 投稿：daisy

這篇文章給大家介紹了如何實現(xiàn)兼容IE789的文件上傳進度條，如果你的工作用過上傳圖片或上傳大文件啥的，一般在IE低版本瀏覽器里，會切換到用flash解決,可是有些人肯定不會為了老舊IE的進度條而去學flash，那么下面來一起看看吧。

Nodejs對文件上傳的處理

在Express4里req.files已經是undefined了；現(xiàn)在用的最多的可能就是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值；現(xiàn)在又來一個問題就是怎么在請求的時候得到這個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被掛起了呢，但是它又保存了每次的執(zhí)行結果，直到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); 
 });

繼續(xù)輪詢。

漂亮，完全就是那么回事！在chrome里看到的和HTML5的進度一個效果，只是在IE789里會有點卡頓的感覺，不過還是能看到詳細的進度值的；畢竟老瀏覽器身子骨不咋地，你們懂的；還有，每次上傳都往global里塞值，怎么也得適當?shù)那謇硪幌掳?，文件上傳完畢，轉移到指定目錄后global['file'+queryToken]=null；

然而，輪詢，就是一個接一個好多好多的請求，這里也許會出問題；要不限制一下吧，間隔500ms請求一次進度值；恩，IE789進度條就這么解決了，說好的丟掉flash；雖然這個輪詢可以兼容所有瀏覽器，但畢竟要浪費那么多請求，還是判斷下，在IE789以外繼續(xù)HTML5吧！

其實衡量一下，額外加個flash上傳和額外的請求，哪個更值呢，原諒我不懂flash，就不多說了，反正我很不喜歡在頁面上加一下額外的文件；

總結

關于文件上傳的組件，還有很多的細節(jié)處理，本想弄一個JS文件的，后來一想，為了可復用性更強，還是作為一個獨立的頁面搞比較好，需要上傳的地方，iframe一下就行了，肯定比弄一個JS文件要好很多。以上就是這篇文章的全部內容，希望能夠對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: