快捷導(dǎo)航

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

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

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

Nodejs對文件上傳的處理

在Express4里req.files已經(jīng)是undefined了；現(xiàn)在用的最多的可能就是formidable了，你知道了它有個progress事件，于是心中大喜，低版本IE的進(jìn)度條有戲了；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); 
 });

是的，你很高興的看到了，控制臺按照預(yù)期打印了一串進(jìn)度值；那么，再進(jì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方法即在頁面上顯示進(jìn)度值；很不幸，你只能看到最后的100%，看不到上傳具體詳細(xì)的進(jìn)度值；再探...

接下來換個思路，試一下，將進(jìn)度值保存到session里，額外加一個請求來輪詢這個進(jìn)度值，哎喲，不錯哦！為了保證你請求的進(jìn)度值是你這次上傳的進(jìn)度值而不是其他上傳的進(jìn)度值，需要在上傳的請求里和額外的請求里約定一個token值；現(xiàn)在又來一個問題就是怎么在請求的時候得到這個token，由于文件上傳的請求體在Request Payload里，所以req.body拿不到帶過去的值，我也不想去解析這堆了，當(dāng)然我也解析不了；放在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，我來輪詢進(jìn)度值了，原諒我，其實我的心很痛；

 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方法即在頁面上顯示進(jìn)度值；很不幸，你只能看到最后的100%，看不到上傳具體詳細(xì)的進(jìn)度值；再探...

好吧，我又一次淪陷了；不過還是感覺不對勁，ajax輪詢沒有問題，問題在于session里要等到上傳完畢才有值，所以只能看到100%，看不到詳細(xì)進(jìn)度值；我是否可以認(rèn)為，在progress里，之前的res.write和這次的req.session被掛起了呢，但是它又保存了每次的執(zhí)行結(jié)果，直到progress完再釋放，所以只能看到100%；沒心情看formidable的源碼，當(dāng)然我也看不咋懂，我就先這么認(rèn)為吧！

既然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的進(jìn)度一個效果，只是在IE789里會有點卡頓的感覺，不過還是能看到詳細(xì)的進(jìn)度值的；畢竟老瀏覽器身子骨不咋地，你們懂的；還有，每次上傳都往global里塞值，怎么也得適當(dāng)?shù)那謇硪幌掳?，文件上傳完畢，轉(zhuǎn)移到指定目錄后global['file'+queryToken]=null；

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

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

總結(jié)

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

您可能感興趣的文章: