Node.js implementation of compatible IE789 file upload progress bar _node.js

Nodejs the processing of file upload

In the Express4 req.files already is undefined , now use the most probably is formidable , you know it has an progress event, so Heart exultation, low version IE progress bar has a chance; OK, try it:

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

Yes, you're happy to see it. The console prints a sequence of progress values as expected; then, further;

 Form 
 . On (' Progress ', function (bytesreceived, bytesexpected) { 
  var n=parseint parsefloat (bytesreceived/ bytesexpected). toFixed (2) *100); 
  Res.write (' <script>window.parent.call (' +n+ ') </script> '); 
  No refresh upload, you know Console.log (n); 
 });

callThe method is to display the progress value on the page; Unfortunately, you can only see the last 100%, do not see the upload specific detailed progress value;

Next, try, save the progress value to session , add a request to poll the progress value, ouch, yes! In order to ensure that the progress you requested is the progress value of your upload instead of other uploaded progress values, you need to agree on an token value in the upload request and the additional request; now another question is how to get this token on request. , because the file uploads the request body in request Payload , so req.body can not get the value with the past, I do not want to parse this heap, of course, I can not resolve; URL in the best, the problem is that sometimes have to refresh two times to refresh token , not good! I have to put it in cookies .

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

In order to IE789, I have to poll the progress value, forgive me, in fact, my heart is very painful;

 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!= ') { 
     getData ();};};} 
  ); 
 } GetData ();

callThe method is to display the progress value on the page; Unfortunately, you can only see the last 100%, do not see the upload specific detailed progress value;

Well, I've fallen again, but it still doesn't feel right, there is no problem with Ajax polling, the problem is session to wait until the upload is finished before the value, so you can see only 100%, see the detailed progress of the value; Can I think that in progress, before res.write and this time req.sessionwas suspended, but it also saved every execution results, until the progress release, so can only see 100%; not in the mood to see formidable the source code, of course, I also see not how to understand, I think so first!

Since there ajax is no problem in polling, it is saved to the point of no effort, not session really, put global it in, try it, always do not put a value into the global object will hang it; 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); 
 });

Continue polling.

Pretty, that's exactly what happened! Seen in Chrome and HTML5 's progress an effect, only in the IE789 will be a little cotton feeling, but still can see the detailed progress of the value; after all, old browser body bones do not, you understand; and, each upload to the value of the global plug, how to properly clean it, File uploaded, transfer to the specified directory global['file'+queryToken]=null ;

However, polling, is one after another many many requests, here may have the problem; the interval 500ms requests the progress value; Well, the IE789 progress bar is so solved, said the loss of Flash; Although this polling can be compatible with all browsers, but after all to waste so many requests, Or judge, in IE789 to continue HTML5 bar!

In fact, to measure, add a flash upload and additional requests, which is more value, forgive me do not understand flash, I do not say, anyway, I do not like to add additional documents on the page;

Summarize

About file Upload components, there are a lot of details to deal with, I would like to get a JS file, and later a think, in order to be more powerful, or as a separate page to do better, need to upload the place, an IFRAME on the line, certainly better than to get a JS file a lot better. The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if there is doubt you can message exchange.