Comment obtenir la progression à partir de XMLHttpRequest ?

Question

Est-il possible d'obtenir la progression d'une XMLHttpRequest (octets chargés, octets téléchargés) ?

Cela peut être utile pour afficher une barre de progression lorsque l'utilisateur télécharge un fichier volumineux. L'API standard ne semble pas le supporter, mais peut-être existe-t-il une extension non standard dans l'un des navigateurs existants ? Cela semble être une fonctionnalité assez évidente à avoir après tout, puisque le client sait combien d'octets ont été chargés/téléchargés.

Le principal problème de cette solution (outre la complexité du code côté serveur) est qu'en général, lors du téléchargement d'un gros fichier, la connexion de l'utilisateur est complètement interrompue, car la plupart des fournisseurs d'accès à Internet offrent une mauvaise connexion en amont. Donc, faire des requêtes supplémentaires n'est pas aussi réactif que je l'avais espéré. J'espérais qu'il y aurait un moyen (peut-être non standard) d'obtenir cette information, que le navigateur possède à tout moment.

Answer 1

Si vous avez accès à votre installation apache et que vous avez confiance dans le code d'une tierce partie, vous pouvez utiliser la fonction module de progression du téléchargement d'apache (si vous utilisez apache ; il y a aussi un fichier module de progression du téléchargement de nginx ).

Sinon, il faudrait écrire un script que l'on peut frapper hors bande pour demander l'état du fichier (vérifier la taille du fichier tmp par exemple).

Il y a un travail en cours dans firefox 3, je crois, pour ajouter le support de la progression du téléchargement au navigateur, mais cela ne va pas être intégré dans tous les navigateurs et être largement adopté avant un certain temps (c'est bien dommage).

Answer 2

La seule façon de le faire en javascript pur est d'implémenter une sorte de mécanisme d'interrogation. Vous devrez envoyer des requêtes ajax à intervalles fixes (toutes les 5 secondes par exemple) pour obtenir le nombre d'octets reçus par le serveur.

Un moyen plus efficace serait d'utiliser le flash. Le composant flex Référence du fichier envoie périodiquement un événement "progress" contenant le nombre d'octets déjà téléchargés. Si vous devez vous en tenir à javascript, des passerelles sont disponibles entre actionscript et javascript. La bonne nouvelle est que ce travail a déjà été fait pour vous :)

swfupload

Cette bibliothèque permet d'enregistrer un gestionnaire javascript sur l'événement flash progress.

Cette solution a le gros avantage de ne pas nécessiter de ressources supplémentaires du côté du serveur.