8795 sujets

Développement web côté serveur, CMS

[Résolu] Ajouter animation de chargement durant upload fichier en PHP

Bonjour à toutes et à tous,

j'aurais une question en rapport avec l'upload en PHP.
En fait j'ai une page qui me permet d'uploader des fichiers sur un serveur. Cette page est donc un formulaire avec un input de type FILES.
Lorsque je choisis mon fichier et que je clique sur valider pour l'uploader, la page qui reste est donc celle du formulaire jusqu'à que le fichier ai été uploadé.
Je voudrais savoir s'il une fois que l'on a cliqué sur VALIDER, il serait possible de faire apparaitre une animation de ce type http://www.epltroyesstpouange.fr/img/loading.gif sous le formulaire afin d'indiquer à l'utilisateur que le fichier est entrain de se charger afin d'éviter qu'il pense que l'envoie ne fonctionne pas et qu'il s'acharne pour rien sur le bouton VALIDER.

Je vous remercie d'avance.
Bonne journée à vous toutes et tous !

Arnaud S.
Modifié par bibi-arnaud (25 Jun 2008 - 11:08)
Il y a à mon avis deux solutions :

Utiliser l'AJAX, qui te permettra de modifier le contenu de la page (donc d'insérer l'image) lors de l'upload, et automatiquement de re-changer le contenu (insérer une confirmation, ou autre) lorsque l'upload a été complété.
L'autre solution serait d'utiliser un Javascript coté navigateur, et afficher l'image lorsque l'internaute clique sur le bouton submit. Mais tu n'auras pas de confirmation automatique de l'upload autre que le chargement de la page cible du formulaire.

Mais pour éviter que l'internaute ne s'acharne sur le bouton, tu peux simplement désactiver celui-ci lorsqu'il clique dessus (toujours à l'aide de javascript).
Merci superjun,

voila ce que j'ai fait et cela fonctionne



<script language="javascript" type="text/javascript">
	function affiche_chargement(depot2) 
	{
		var Obj  = document.getElementById( 'D_INPUT'); // Recup du DIV
		var Html = ""; // le nouveau contenu
		Html += "<img src='images/boutons/loading.gif' alt='Chargement en cours. \n Veuillez patienter ...'/>";
		Obj.innerHTML = Html; // ecriture dans le DIV
	} 
</script>


puis en dessous du bouton submit j'ai rajouté un tableau avec une colonne qui a pour id D_INPUT et j'ai mis un attribut ONCLICK sur le bouton submit qui appelle la fonction AFFICHE_CHARGEMENT et qui donc insere l'image en dessous du formulaire.

Merci bien superjun pour ta réponse.
Salut,
bibi-arnaud a écrit :
j'ai mis un attribut ONCLICK sur le bouton submit qui appelle la fonction AFFICHE_CHARGEMENT et qui donc insere l'image en dessous du formulaire.
Si je puis-je me permettre, il vaudrait mieux lancer ton script sur l'évènement onsubmit de ton <form> car on peut très bien ne pas cliquer sur le bouton mais appuyer sur ENTREE Smiley cligne !
Heyoan a écrit :
Salut,
Si je puis-je me permettre, il vaudrait mieux lancer ton script sur l'évènement onsubmit de ton <form> car on peut très bien ne pas cliquer sur le bouton mais appuyer sur ENTREE Smiley cligne !


Je prend note, c'est vrai que je n'avais pas pensé à cette option.

Merci de l'info Smiley cligne Smiley smile
Sujet clos
Aller à