Afficher page de chargement durant l'execution d'un script

Spydeus · 19/08/2011, 10h58

Bonjour,

Voilà la situation :
Formulaire d'upload d'images.
Script php qui effectue des calculs sur l'image.
Affichage des résultats des calculs

Ce que je souhaiterais :
Quand la personne valide le formulaire, elle est redirigée vers une page "d'attente", comme lorsque l'on effectue une recherche de billet de train sur le site de www.voyages-sncf.com.
Lorsque le traitement est terminé (peut être instantané ou prendre plusieurs dizaines de secondes), l'utilisateur est directement redirigé vers la page de resultat des calculs.

La page d'attente devrait être du code HTML ou php pour que je puisse afficher diverses informations.

J'ai regardé du coté de l'upload de fichiers en Ajax, mais rien ne ressemble à ce que je voulais.J'ai trouvé un script qui affiche un message pendant le chargement d'une page, mais ce que je souhaite, c'est avoir une vraie page intermédiaire entre le formulaire d'upload et la page de résultats.

Par avance, merci pour votre aide

Thes32 · 19/08/2011, 11h20

salut,

je pourrais résumer comme ceci :

- le script d'upload (script1.php) enverrai vers un script de confirmation d'upload + initialisation traitement (script2.php)

- via ajax script2.php déclecnherai le traitement sur l'image via un script3.php

- une fois le traitement complet script3.php stockerai les données (dans une bdd par exemple) et enverrai un identifiant via ajax à script2.php

- script2.php reçoit l'identifiant et dirige l'utilisateur avec javascript vers une page genre script4.php?id_info=ID

voilà

FirePrawn · 19/08/2011, 13h35

Bonjour,

Si tu veux une page de chargement, il te faut nécessairement cette page physiquement.
La technique de Thes correspond à ce que tu veux faire

Spydeus · 19/08/2011, 13h39

Merci pour votre réponse rapide et claire !

J'ai compris l'algo, maintenant il va falloir que je code tout ça, mais d'après ce que j'ai lu, l'ajax n'est pas trop compliqué.

kdmbella · 19/08/2011, 15h07

pour te lancer je te conseille ces 3 tutos tu seras servi :

http://gael-donat.developpez.com/web/intro-ajax/
http://siddh.developpez.com/articles/ajax/
http://dmouronval.developpez.com/tut...-requete-ajax/

sans oublier la faq
http://javascript.developpez.com/faq/

bon travail

Spydeus · 19/08/2011, 19h33

Ok, merci !

Heureusement que demain c'est le weekend !

Spydeus · 20/08/2011, 00h51

Bon, après pas mal de lecture et de test, je bute sur un problème. Dans ce tutoriel, je fais cette partie : http://gael-donat.developpez.com/web/intro-ajax/#LIII-B.

En fait, le div "Veuillez patienter ..." reste affiché et ne disparait que si je clique avec la souris.

J'ai ceci :
upload.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
header('Content-Type: text/xml'); 
 
// vérification du fichier etc
 
sleep(5); // pour tester car je suis en local alors c'est instantanné
 
?>

index.php :
contient le formulaire et renvoie vers le fichier script2.php lorsque l'on clique sur le bouton "envoyer" du formulaire.

script2.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
 
        <script type="text/javascript" src="ajax.js"></script>
 
</head>
 
<body onload="ajax()">
 
<div class="tumevoispas" id="message">Veuillez patienter...</div>
 
</body>
?>
</html>

ajax.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    //on affiche le message d'acceuil
    document.getElementById("message").className="tumevois";
 
    xhr.open("GET", "upload.php", true);
    xhr.send(null);
}
 
function alert_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	document.getElementById("message").className="tumevoispas";
    }
}

En théorie, il doit se passer :
Appuie sur le bouton "envoyer", redirection vers script2.php, qui lance au chargement de la page la fonction ajax(). Cette fonction demande au serveur d'executer le fichier upload.php. Cela affiche alors un message d'attente qui disparait quand upload.php arrive à la fin du fichier.

Je sais que ce n'ai pas ce que je voulais faire au début, mais pour l'instant je me concentre simplement sur l'upload. Car si je n'arrive même pas à faire ça, je ne pourrai pas me débrouiller pour demander à mon script de calcul de renvoyer l'identifiant ID !

Merci

19/08/2011, 10h58	#1
Spydeus Invité régulier Étudiant Inscription : juin 2007 Messages : 18 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2007 Messages : 18 Points : 6 Points : 6	Afficher page de chargement durant l'execution d'un script Bonjour, Voilà la situation : Formulaire d'upload d'images. Script php qui effectue des calculs sur l'image. Affichage des résultats des calculs Ce que je souhaiterais : Quand la personne valide le formulaire, elle est redirigée vers une page "d'attente", comme lorsque l'on effectue une recherche de billet de train sur le site de www.voyages-sncf.com. Lorsque le traitement est terminé (peut être instantané ou prendre plusieurs dizaines de secondes), l'utilisateur est directement redirigé vers la page de resultat des calculs. La page d'attente devrait être du code HTML ou php pour que je puisse afficher diverses informations. J'ai regardé du coté de l'upload de fichiers en Ajax, mais rien ne ressemble à ce que je voulais.J'ai trouvé un script qui affiche un message pendant le chargement d'une page, mais ce que je souhaite, c'est avoir une vraie page intermédiaire entre le formulaire d'upload et la page de résultats. Par avance, merci pour votre aide
	00

19/08/2011, 11h20	#2
Thes32 Rédacteur/Modérateur Développeur Web Inscription : décembre 2006 Messages : 2 335 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : décembre 2006 Messages : 2 335 Points : 3 774 Points : 3 774	salut, je pourrais résumer comme ceci : - le script d'upload (script1.php) enverrai vers un script de confirmation d'upload + initialisation traitement (script2.php) - via ajax script2.php déclecnherai le traitement sur l'image via un script3.php - une fois le traitement complet script3.php stockerai les données (dans une bdd par exemple) et enverrai un identifiant via ajax à script2.php - script2.php reçoit l'identifiant et dirige l'utilisateur avec javascript vers une page genre script4.php?id_info=ID voilà __________________ Développeur \| Zend Certified Engineer Étapes Pour mieux se servir du forum: 1. Commencez par lire les cours et tutoriels ; 2. Faites une recherche; 3. Faites un post si rien trouvé dans les deux étapes précédentes en respectant les règles; Nix>_Rien n'est plus pratique que la théorie
	00

19/08/2011, 13h35	#3
FirePrawn Modérateur Sébastien Ingénieur réalisateur Inscription : mars 2011 Messages : 773 Détails du profil Informations personnelles : Nom : Sébastien Âge : 24 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 773 Points : 2 332 Points : 2 332	Bonjour, Si tu veux une page de chargement, il te faut nécessairement cette page physiquement. La technique de Thes correspond à ce que tu veux faire __________________ - Avant toute chose : lire le mode d'emploi du forum et ses règles. - avant de poster - Je ne réponds pas aux questions techniques en MP.
	00

19/08/2011, 15h07	#5
kdmbella Membre Expert Demazy Mbella Développeur Web Inscription : août 2010 Messages : 620 Détails du profil Informations personnelles : Nom : Demazy Mbella Localisation : Cameroun Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : août 2010 Messages : 620 Points : 1 470 Points : 1 470	pour te lancer je te conseille ces 3 tutos tu seras servi : http://gael-donat.developpez.com/web/intro-ajax/ http://siddh.developpez.com/articles/ajax/ http://dmouronval.developpez.com/tut...-requete-ajax/ sans oublier la faq http://javascript.developpez.com/faq/ bon travail __________________ Trois personnes peuvent garder un secret si deux d'entre elles sont mortes. :Benjamin Franklin L'humanité se divise en trois catégories : ceux qui ne peuvent pas bouger, ceux qui peuvent bouger, et ceux qui bougent : Benjamin Franklin Le hasard, c'est le déguisement que prend Dieu pour voyager incognito: Albert Einstein bon je m'arrête là au risque de me faire buter
	00

19/08/2011, 13h39	#4
Spydeus Invité régulier Étudiant Inscription : juin 2007 Messages : 18 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2007 Messages : 18 Points : 6 Points : 6	Merci pour votre réponse rapide et claire ! J'ai compris l'algo, maintenant il va falloir que je code tout ça, mais d'après ce que j'ai lu, l'ajax n'est pas trop compliqué.
	00

19/08/2011, 19h33	#6
Spydeus Invité régulier Étudiant Inscription : juin 2007 Messages : 18 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2007 Messages : 18 Points : 6 Points : 6	Ok, merci ! Heureusement que demain c'est le weekend !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email