Comment créer des barres de progression de téléchargement de fichiers graphiques dans HTML5 et JavaScript

Les plats clés

• La balise de progression HTML5, qui fournit des attributs pour la valeur de progression et la valeur actuelle à la fin, peut être utilisée pour créer une barre de progression de téléchargement de fichiers graphiques, bien que l'auteur ait choisi d'utiliser une balise P standard pour plus d'options de style.
• La barre de progression peut être stylée à l'aide de CSS, avec la barre verte créée comme un graphique deux fois plus large que l'élément de progression, et une couleur solide appliquée lorsque le téléchargement réussit ou échoue.
• La barre de progression est implémentée dans JavaScript en modifiant la fonction uploadFile (), en ajoutant une fonction de gestionnaire d'événements «Progress» qui calcule la nouvelle position d'arrière-plan et définir une classe de «succès» ou «défaillance» lorsque le téléchargement se termine.

Dans mes articles précédents, nous avons découvert comment utiliser le fichier html5 glisser-déposer, ouvrir des fichiers à l'aide de JavaScript et télécharger de manière asynchrone des fichiers à l'aide d'Ajax. Dans la dernière partie de cette série, nous couvrons la partie la plus excitante du processus: les barres de progrès graphiques! Les barres de progrès de téléchargement de fichiers fournissent des commentaires essentiels des utilisateurs, mais ils ont été notoirement difficiles à mettre en œuvre. Jusqu'à présent, c'est. Firefox et Chrome prennent en charge l'objet XMLHTTPRequest2 qui propose un gestionnaire d'événements de progression. Mais d'abord, considérons comment notre barre de progrès sera mise en œuvre…

La balise de progression HTML5

La nouvelle balise de progrès fournit deux attributs:

• Valeur: la valeur de progression actuelle
• Max: la valeur à l'achèvement

La balise aurait été idéale dans cette démonstration et, bien qu'elle soit prise en charge dans Chrome, elle est juste apparue dans Firefox 6. De plus, aucun du navigateur n'offre de nombreuses propriétés de style, donc je l'ai laissée en faveur d'une balise P standard. Ceci est annexé en tant qu'enfant à un div avec l'identifiant «progrès».

Styler la barre de progrès

Notre balise P affichera le nom de fichier dans une boîte bordée de 250px de 250px:

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

Pour la barre verte elle-même, j'ai créé un graphique qui était deux fois plus large que l'élément de progression (500px). La gauche 250px est colorée et la droite 250px est transparente: Ce graphique est utilisé comme image d'arrière-plan pour la barre de progression et positionné à «x% 0» où x% indique la proportion qui reste (non terminée), c'est-à-dire

• Les progrès commencent à partir de la «position de fond: 100% 0», c'est-à-dire 100% restant
• Les progrès se terminent à «Position d'arrière-plan: 0% 0», c'est-à-dire que rien ne reste
• «Position d'arrière-plan: 30% 0» signifie que 70% ont été achevés:

Une couleur unie est appliquée en définissant une classe lorsque le téléchargement réussit ou échoue:

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

Implémentation de la barre de progression dans JavaScript

Nous pouvons maintenant modifier notre fonction uploadFile (). Lorsqu'un fichier JPG valide est rencontré, nous ajoutons une nouvelle balise P à l'élément #Progress et ajoutons le nom de fichier en tant que texte:

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

Nous avons maintenant besoin d'une fonction de gestionnaire d'événements «Progress». Cela reçoit un objet avec des propriétés. Télélées et.

// upload JPEG files
function UploadFile(file) {

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "image/jpeg" && file.size 


Si vous connaissez Ajax, vous reconnaîtrez le gestionnaire d'événements OnreadyStateChange. Cela détermine quand le téléchargement s'est terminé et styles la barre de progression en conséquence (définit une classe de «succès» si le téléchargement a réussi):

<pre class="brush:php;toolbar:false">
		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

Enfin, nous envoyons le fichier à notre serveur PHP comme avant:

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");
			}
		};

Nous avons enfin une solution qui:

1. Active le glisser et la décharge de fichiers sur un élément de page Web
2. analyse et affiche des fichiers supprimés sur le client
3. télécharge de manière asynchrone des fichiers sur le serveur
4. montre une barre de progrès graphique lors du téléchargement
5. utilise une amélioration progressive pour soutenir la plupart des navigateurs
6. est codé sans nécessiter de bibliothèque JavaScript.

Veuillez consulter la page de démonstration, cependant, notez qu'il est hébergé sur un serveur sans PHP afin que les téléchargements de fichiers ne se produisent pas. Pour le tester, veuillez télécharger les fichiers pour examiner le code et l'héberger sur votre propre serveur. J'espère que vous avez apprécié cette série et que vous envisagez comment le glisser-déposer des fichiers pourrait aider votre application Web. Si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la maîtrise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme Learn HTML5.

Questions fréquemment posées (FAQ) sur HTML5 JavaScript Fichier Upload Progress Bar

Comment puis-je personnaliser l'apparence de la barre de progression?

Personnalisation L'apparence de la barre de progrès peut être effectuée à l'aide de CSS. Vous pouvez modifier la couleur, la hauteur, la largeur et même la forme de la barre de progrès. Par exemple, pour modifier la couleur, vous pouvez utiliser la propriété «fond d'arrière-plan». Vous pouvez également utiliser la propriété «Border-Radius» pour rendre la barre de progression circulaire ou arrondie. N'oubliez pas de cibler la classe ou l'identification correcte de votre CSS pour appliquer ces modifications à la barre de progression.

Puis-je utiliser cette barre de progression pour plusieurs téléchargements de fichiers?

Oui, vous pouvez utiliser ce progrès bar pour plusieurs téléchargements de fichiers. Cependant, vous devrez modifier le code JavaScript pour gérer plusieurs fichiers. Vous pouvez utiliser l'attribut «multiple» dans la balise d'entrée pour permettre la sélection de plusieurs fichiers. Ensuite, dans votre javascript, vous devrez parcourir les fichiers et les télécharger individuellement, à la mise à jour de la barre de progression pour chaque fichier.

Comment puis-je afficher le pourcentage d'achèvement de téléchargement sur la barre de progression?

L'affichage du pourcentage d'achèvement de téléchargement sur la barre de progression peut être réalisé en mettant à jour le contenu texte de l'élément de barre de progression dans l'élément de progression dans l'élément de progression dans l'élément de progression dans l'élément de progression dans l'élément de progression dans l'élément de progression dans l'élément de progrès 'Écouteur d'événements. Vous pouvez calculer le pourcentage en divisant la quantité chargée par la quantité totale et en multipliant par 100. Ensuite, définissez cette valeur comme le contenu texte de l'élément de barre de progression.

Pourquoi ma barre de progression ne se met pas à jour pendant le fichier Téléchargement du fichier ?

Si votre barre de progression ne se met pas à jour pendant le téléchargement de fichiers, cela pourrait être dû à plusieurs raisons. Une raison courante est que l'auditeur d'événements «Progress» n'est pas configuré correctement. Assurez-vous que vous avez ajouté l'écouteur d'événements à l'objet correct et que le nom de l'événement est correctement orthographié. Vérifiez également que le code à l'intérieur de l'écouteur d'événements met à jour correctement la valeur et les attributs max de la barre de progression.

Puis-je utiliser cette barre de progression avec d'autres langages de programmation comme PHP ou Python?

Oui, vous pouvez utiliser cette barre de progrès avec d'autres langages de programmation comme PHP ou Python. La barre de progression est implémentée à l'aide de HTML et JavaScript, qui sont des technologies côté client et peuvent interagir avec n'importe quelle technologie côté serveur. Vous devrez modifier la demande AJAX dans le code JavaScript pour envoyer le fichier à votre script côté serveur, et votre script côté serveur devra gérer le téléchargement du fichier et renvoyer les informations de progression.

Comment peut Je fais en bondre la barre de progression?

Pour que la barre de progrès soit en douceur, vous pouvez utiliser les transitions CSS. Ajoutez une propriété «transition» à l'élément de barre de progression dans votre CSS, en spécifiant la propriété à la transition (par exemple, «largeur»), la durée de la transition et la fonction de synchronisation (par exemple, «linéaire», «facilité» , «faciliter»).

Comment puis-je gérer les erreurs pendant le téléchargement de fichiers?

Les erreurs de traitement pendant le téléchargement de fichiers peuvent être effectuées dans l'écouteur d'événements «Erreur». Cet événement est licencié lorsqu'une erreur se produit pendant le téléchargement. Dans l'événement, vous pouvez afficher un message d'erreur à l'utilisateur et réinitialiser la barre de progression.

Puis-je annuler le téléchargement de fichiers et réinitialiser la barre de progression?

Oui, vous pouvez annuler le Téléchargement de fichiers et réinitialisez la barre de progression. Pour annuler le téléchargement de fichiers, vous pouvez appeler la méthode «Aborter» sur l'objet XMLHTTPRequest. Pour réinitialiser la barre de progression, vous pouvez définir son attribut de valeur sur 0.

Comment puis-je limiter la taille du fichier pour le téléchargement?

limiter la taille du fichier pour le téléchargement peut être effectué dans le code JavaScript Avant d'envoyer la demande Ajax. Vous pouvez obtenir la taille du fichier à partir de la propriété «Taille» de l'objet de fichier, et si elle dépasse votre limite, affichez un message d'erreur et avortez le téléchargement.

Puis-je utiliser cette barre de progrès pour d'autres types de demandes AJAX, pas seulement les téléchargements de fichiers?

Oui, vous pouvez utiliser cette barre de progression pour d'autres types de demandes AJAX, pas seulement les téléchargements de fichiers. L'événement «Progress» est licencié pour tout type de demande AJAX, pas seulement les téléchargements de fichiers. Vous devrez modifier le code JavaScript pour envoyer la demande AJAX appropriée et mettre à jour la barre de progression en fonction de la progression de la demande.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!