Node.js implémente une barre de progression de téléchargement de fichiers compatible avec IE789

Traitement Nodejs des téléchargements de fichiers

Dans Express4, req.files n'est déjà pas défini ; le plus couramment utilisé maintenant est probablement formidable. Vous savez qu'il a un événement de progression, vous êtes donc ravi. de la version IE fonctionne ; OK, essayez-le :

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

Oui, vous êtes content de le voir, la console s'imprime comme prévu Une série de progrès valeurs ; puis allez plus loin ;

form
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);
 res.write(&#39;<script>window.parent.call(&#39;+n+&#39;)</script>&#39;);
 //无刷新上传，你们懂的 console.log(n);
});

La méthode d'appel affiche la valeur de progression sur la page ; malheureusement, vous ne pouvez voir que la fin 100 ; %, vous ne pouvez pas voir la valeur de progression spécifique et détaillée du téléchargement ; explorons à nouveau...

Changeons l'idée et essayons-la. Enregistrez la valeur de progression dans la session et ajoutons une demande supplémentaire à. interrogez les progrès. Ça vaut le coup, oh, pas mal ! Afin de garantir que la valeur de progression de votre demande est la valeur de progression de votre téléchargement actuel et non la valeur de progression d'autres téléchargements, vous devez vous mettre d'accord sur une valeur de jeton dans la demande de téléchargement et les demandes supplémentaires. Maintenant, une autre question se pose : comment ? pour spécifier la valeur lors de la demande Après avoir obtenu ce jeton, puisque le corps de la demande de téléchargement du fichier se trouve dans la charge utile de la demande, req.body ne peut pas obtenir la valeur transmise. Je ne veux pas analyser cette pile. Bien sûr, je peux. Pour l'analyser, il est préférable de le mettre dans l'URL. Le problème est que parfois vous devez actualiser le jeton deux fois, ce qui n'est pas bon ! Je n'ai pas d'autre choix que de le mettre dans un cookie !

var cookies=function () {
 var cks=req.headers.cookie.split(';'),obj={};
 for(var i=0;i<cks.length;i++){
  obj[cks[i].split(&#39;=&#39;)[0].replace(/\s+/ig,&#39;&#39;)]=unescape(cks[i].split(&#39;=&#39;)[1]);
 }
 return obj;
}();
var queryToken=cookies.__token__;
 
form .on(&#39;progress&#39;,function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
 if (req.session[&#39;file&#39;+queryToken]) { 
  req.session[&#39;file&#39;+queryToken].percent=n;
 }else{
  req.session[&#39;file&#39;+queryToken]={
   token:queryToken,
   percent:n
  }
 };
 console.log(n);
});

Pour IE789, je suis venu sonder la valeur de progression. Pardonnez-moi, j'ai vraiment mal au cœur

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!=&#39;100&#39;) {
    getData();
   };
  };
 });
}
getData();

La méthode d'appel affiche la valeur de progression sur la page ; malheureusement, vous ne pouvez voir que les derniers 100 % et ne pouvez pas voir la valeur de progression spécifique et détaillée du téléchargement ; .

D'accord, j'ai encore eu des ennuis ; mais j'ai toujours l'impression que quelque chose ne va pas. Il n'y a aucun problème avec le sondage ajax. Le problème est que la valeur dans la session doit attendre que le téléchargement soit terminé, donc. Je ne peux voir que 100 %, mais je ne le vois pas. Valeur de progression détaillée ; puis-je penser qu'en cours, la res.write précédente et cette fois la req.session sont suspendues, mais elle enregistre chaque résultat d'exécution jusqu'à ce que la progression soit terminée, puis le publie, donc moi seul peux le voir à 100% ; je ne suis pas d'humeur à regarder le code source de formidable. Bien sûr, je ne peux pas le comprendre non plus, donc je vais juste le penser pour l'instant !

Puisque le sondage ajax est correct, alors l'enregistrer dans la session n'est pas une bonne idée ; si cela ne fonctionne pas, essayez de le mettre dans l'objet global. Il ne se bloquera pas si vous insérez une valeur dans le fichier. objet global ; Apporter des modifications et les mettre dans 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);
});

Continuer l'interrogation.

Magnifique, exactement comme ça ! Ce que vous voyez dans Chrome est le même que la progression de HTML5, sauf que cela vous semblera un peu bloqué dans IE789, mais vous pouvez toujours voir la valeur de progression détaillée après tout, l'ancien navigateur n'est pas très bon, vous savez aussi ; Oui, la valeur est insérée dans global à chaque fois qu'elle est téléchargée. Elle doit être correctement nettoyée une fois le fichier téléchargé et transféré dans le répertoire spécifié, global['file' queryToken]=null; Cependant, l'interrogation, c'est-à-dire qu'il y a beaucoup de requêtes les unes après les autres, et il peut y avoir des problèmes ici ; pourquoi ne pas la limiter et bien demander la valeur de progression toutes les 500 ms, la barre de progression IE789 est résolue comme ça et le flash est rejeté ; comme promis ; bien que ce sondage puisse être compatible avec tous les navigateurs, mais après tout, tant de requêtes sont inutiles, il vaut donc mieux porter un jugement et continuer HTML5 en plus d'IE789 !

En fait, pour peser, lequel vaut le plus la peine d'ajouter un téléchargement flash supplémentaire ou une demande supplémentaire ? Pardonnez-moi de ne pas connaître le flash, donc je n'en dirai pas plus. Je n'aime pas ajouter des fichiers supplémentaires à la page. ;

Résumé

Concernant le composant de téléchargement de fichiers, il y a encore de nombreux détails à régler. Au départ, je voulais créer un fichier JS, mais ensuite. J'y ai réfléchi, afin de le rendre plus réutilisable, j'ai décidé de l'utiliser comme un Il est préférable de créer des pages indépendantes. Partout où vous avez besoin de télécharger, utilisez simplement une iframe. C'est certainement bien mieux que de créer un fichier JS. Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il pourra apporter de l'aide aux études ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour plus d'articles sur l'implémentation Node.js de la barre de progression de téléchargement de fichiers compatible IE789, veuillez faire attention au site Web PHP chinois !