Gif qui se fige a l'upload d'un fichier. [Résolu]

[nitteN]

Bonjour a tous,

J'ai un soucis avec l'animation d'un gif qui ne se fait pas.
Je m'explique : Je créé une fonction en javascript :

Code :

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
29
30
31
32
33
34
<script type="text/javascript">
<!--
function Verif_attente(id_attente,chemin_image)
    { 
 
        var id_attente = document.getElementById(id_attente);
 
        if (typeof id_attente != 'undefined')
        {
            // Nettoyage de l'élément cible
            var nb_noeuds = id_attente.childNodes.length;
 
            for (var i = 0; i < nb_noeuds; i++)        
                                {                                  
                                        id_attente.removeChild(id_attente.firstChild);
                                }
 
            var texte = 'Patientez : Envoi en cours ... ';
            // Création du noeud texte
            var noeud_texte = document.createTextNode(texte);
 
            // Création du noeud image
            var image = document.createElement('img');
            image.setAttribute('src',chemin_image);
 
            // Insertion du noeud texte
            id_attente.appendChild(noeud_texte);
 
			// Insertion du noeud image
            id_attente.appendChild(image);
        }
    }
-->
</script>

Elle aura pour but d'écrire dans un div patientez ect.. et d'y ajouter une image lorsque j'envoi le fichier sur le serveur. :

Code html :

1
2
3
4
5
<form method="POST" onsubmit = "Verif_attente('message_attente','loading.gif')"  action="ma page.php" enctype="multipart/form-data">
 
[...]
 
<div id="message_attente"><img style="visibility:hidden" src="loading.gif" /></div>

Mais le message s'affiche bien l'upload se fait coté serveur mais le soucis c'est que le gif ne s'anime pas...

Quelqu'un aurais une idée ?

[nitteN]

J'ai peutêtre trouver une solution si j'affiche mon message dans une iframe d'après ce que j'ai lut sur les forum le gif ne se fige pas mais je n'ai pas de connaissance a javascript . comment modifier le code si dessus pour changer l'attribu : display : none en display : block ?

[RomainVALERI]

Envoyé par nitteN

comment modifier le code si dessus pour changer l'attribu : display : none en display : block ?

Quelque chose comme

Code html :

<div id="message_attente"><img style="visibility:hidden;display:none;" src="loading.gif" /></div>

?

ou bien

Code javascript :

image.style.display = "none";

?

Ou bien pour le faire apparaitre, passer cette même valeur à "block", voire "" qui réattribuera le display par défaut de l'élément...

(mais il est également possible que je n'aie pas compris ta question, mon couteau à poulets est au sale )

[nitteN]

Non ma question été celle la le temps que je t'ai sous la main, mon code ci dessus était un copier collé d'une personne qui proposé son code mais je ne comprend pas grand chose au Javascript et n'ayant pas envie de me lancer dedans en ce moment pourrais-tu m'expliquer comment puis-je faire un script du genre :

quand j'envoi le formulaire et jusqu'a ce que l'envoie et en cour
j'ai le style display:block pour l'iframe : Iframewait ou pour le div où est placée l'iframe
Et dès que l'envoi est fini : display:none
Car j'ai essayer ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
<!--
function Verif_attente(id_attente)
    { 
 
        var id_attente = document.getElementById(iframwait);
 
        if (typeof id_attente != 'undefined')
        {
            // Nettoyage de l'élément cible
            var nb_noeuds = id_attente.childNodes.length;
 
            for (var i = 0; i < nb_noeuds; i++)        
                                {                                  
                                        id_attente.removeChild(id_attente.firstChild);
                                }
 
		iframewait.style.display = "block";  }
        }
    }
-->
</script>

+

Code :

<div id="iframewait"><iframe style="display: none;" src='wait.php' id="iiframewait" name="iiframewait" SCROLLING='NO' NORESIZE width='465px' height='277px' style='border:0;  border-radius: 7px; -moz-border-radius: 7px; -border-top-left-radius: 7px;'></div>

Mais rien ne s'affiche ...

[RomainVALERI]

Le que problème c'est se il faire minimum faut comprendre un les s'en règles d'énonciation respecter sinon pour on pas sort...


désolé, j'ai envie de t'aider, mais le problème n'est pas au niveau de javascript, là

[nitteN]

humm j'ai pas compris ta phrase en totalité mais je pense que tu as dit que je devait apprendre les règles d'énionciations, mais de mon message ? Tu n'as pas compris ? ou alors en javascript ?

[Bovino]

Code :

var id_attente = document.getElementById(iframwait);

Là tu cherches l'élément dont l'id correspond à la valeur de la variable iframwait, ce qui ne semble pas être ce que tu souhaites puisque cette variable n'existe pas et qu'un élément ayant son nom pour id existe.
Je suppose donc que ce que tu veux faire est plus

Code :

var id_attente = document.getElementById('iframwait');

[nitteN]

Oui, Merci

[nitteN]

J'ai rééssayé mais toujours le même soucis rien n'apparait comment puis-je dire en javascript : temps que l'upload n'est pas fini continuer a mettre le "display" en "block" et le remettre en "none" des que l'upload est fini ?


JS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
<!--
function Verif_attente(id_attente)
    {            
        var id_attente = document.getElementById(id_attente);
		var fram;
		fram = document.createElement("IFRAME");
		fram.style.display = "block";
		fram.src = "wait.html";
 
		// on ajoute le frame dans le div
		id_attente.appendChild(fram);
    }
-->
</script>

Appel de la fonction :

Code html :

<form method="POST" onsubmit="Verif_attente('iframewait')"  action="fenetre_popup.php?vari=<?php echo $_GET['vari']; ?>" enctype="multipart/form-data">

Div :

Code html :

<div id="iframewait"></div>

EDIT: L'IFRAME S'ouvre bien mais aucun contenu a l'interieur ... pourtant dans mon fichier wait.html :

Code html :

1
2
3
4
5
6
7
8
<html>
<head>
</head>
<body>
<img width="32px" height="32px" src="loading.gif">
<p>Please WAIT</p>
</body>
</html>

[Auteur]

bonsoir,

est-ce que cette contribution peut t'aider ?

[nitteN]

Merçi beaucoup pour cette contribution

Sujet résolu ^^