Télécharger la progression (avec ou sans XMLHttpRequest 2) avec Javascript

Question

XMLHttpRequest 2 a une nouvelle chose. Il peut télécharger des fichiers. J'ai eu ce travail (c'est super facile). Maintenant, je me demande s'il existe un moyen d'obtenir la progression du téléchargement de ce fichier. Cela ne m'intéresse pas normalement, mais dans Google Chrome (8), j'ai vu que l'événement onreadystatechange est un XMLHttpRequestProgressEvent. Progrès ... Il n'y a rien là-dedans de progrès de téléchargement (juste demande l'état), mais cela m'a fait me demander.

Google Chrome a un «compteur» de progression lors du téléchargement natif de gros fichiers. C'est standard. Il est toujours là et non configurable. C'est dans la barre d'état. Est-ce que quelque chose comme ça est possible avec Javascript? Je voudrais le mettre dans un bel élément <progress> ou quelque chose.

Je ne veux pas d'uploaders SWF ou Java (avec polling et> callbacks JS). Ça doit être natif. Si le navigateur peut le faire, Javascript devrait être capable de le faire, n'est-ce pas? =)

Dans le cas de non XMLHttpRequest 2, je suppose que ce ne serait pas possible avec le téléchargement de fichiers très standard (pas d'ajax et juste un <input type=file>).

Merci pour l'information

Answer 1

Accrocher l'événement progress. Cela vous donnera des progrès pour toutes les demandes. Vérifiez d'abord si l'objet de téléchargement est disponible - cela vous permettra de progresser uniquement pour la partie de téléchargement.

Quelque chose comme ceci:

var xhr; // this is your XMLHttpRequest 

// hook to upload events if available, otherwise snag all progress events 
var eventSource = xhr.upload || xhr; 

eventSource.addEventListener("progress", function(e) { 
    // normalize position attributes across XMLHttpRequest versions and browsers 
    var position = e.position || e.loaded; 
    var total = e.totalSize || e.total; 

    // TODO: display progress 
});