Forum d'entraide PHPFrance

Bonjour ,
voila j'ai mis sur un site un petit script d'upload d'images trouvé sur la toile . jusque la ca roule
voila comment il fonctionne :

bouton parcourir et bouton up ,
quand on a choisi l'image et appuyé sur up ,
seule la barre du navigateur nous fais voir qu'il se passe quelques chose,
puis le menu disparait et fait apparaitre le lien de l'image .


ma question :
comment intégrer un gif animé par exemple de chargement



dans le script
je voudrais qu'au moment ou on appui sur le bouton "up"
le menu disparaisse et laisse juste un logo tourner disant que ca charge ,
une fois terminé le logo disparait et laisse apparaitre le lien


d'avance merci


EDIT : voici le code

<?php
// Taille max des fichiers (octets)
$taille_maxi=5300000;
// Répertoire de stockage
$rep="upload29/";

if(isset($_FILES['userfile'])) {
	$taille = filesize($_FILES['userfile']['tmp_name']);
	if($taille<$taille_maxi) {
		$savefile= $rep.$_FILES['userfile']['name'];
		$temp = $_FILES['userfile']['tmp_name'];
		$extensions = array('.jpg');
		$extension = strrchr($_FILES['userfile']['name'], '.'); 
		if(in_array($extension, $extensions)) {	   
			   $chaine = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
			   $nb_caract = 5;
			   $pass = "";
			   for($u = 1; $u <= $nb_caract; $u++) {
				$nb = strlen($chaine);
				$nb = mt_rand(0,($nb-1));
       				$pass.=$chaine[$nb];
			   }
			   $nom_fichier = $pass;
			   $my_ext = strrchr($_FILES['userfile']['name'], '.');
			   $nom_fichier = $nom_fichier.$my_ext;
         		   if (move_uploaded_file($temp, $rep.$nom_fichier)) { ?>
      	   			  <div align="center">Votre fichier &agrave; bien été enregistré ! <br>     
                        <? $url = 'http://www.votresite.fr/'.$rep.$nom_fichier.''; ?>
                      Lien Direct :<br> 
                      <? echo $url;  ?> <br>
                      <? return ;
			       } else { ?>
                     Erreur<br>

                     <? }
		} else { ?>
          Erreur<br>
          <?  }
	} else { ?>
    Erreur<br>
    <? } 
} 

?>
<FORM METHOD="POST"
      ENCTYPE="multipart/form-data">
    <div align="center">
     <INPUT TYPE=HIDDEN NAME=MAX_FILE_SIZE
      VALUE=<? echo $taille_maxi;?>>
     <INPUT TYPE=FILE NAME="userfile" size='35' style="background-color: #EFEFEF;font: verdana; color: #000000; border: 0px;" value="">
     <br><br>
     <INPUT TYPE="image" NAME="envoyer"  BORDER=0>
    </div>
</FORM>

salut,

cela se fait coté client, flash, JS / ajax etc
par exemple http://www.siteduzero.com/tutoriel-3-61 ... e-php.html si l'extension APC est activée ou avec flash http://demo.swfupload.org/v220/index.htm

bon pas tester c'est trouver rapidement sur google http://www.google.fr/search?q=barre+de+ ... de+fichier

@+

je veux pas un truc mega complet qui surveille l'upload c'est trop complexe pour moi ca .
non je veux simplement mettre un gif animé après avoir appuyé sur le bouton "up"

ce lien est également un script d'upload qui indique "patientez..." en attendant la fin du chargement.

La partie javascript qui va t'intéresser est :

<script type="text/javascript">
<!--
function Verif_attente(id_attente)
    {              
        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...';
            // Création du noeud texte
            var noeud_texte = document.createTextNode(texte);
            // Insertion du noeud texte
            id_attente.appendChild(noeud_texte);
        }
    }
-->
</script>

on appelle la fonction Verif_attente onsubmit dans la balise form en indiquant en paramètre l'id du bloc pour l'affichage

<form enctype = "multipart/form-data"  ...  onsubmit = "Verif_attente('message_attente')" >

...
</form>

<div id = "message_attente"></div>

A l'époque je n'avais pas mis de gif animé (et donc un message à la place) car le gif restait figé avec IE6 et peut-être sur d'autres versions d'IE ce qui pouvait donner à penser que le téléchargement était bloqué. Mais pour un gif animé on peut reprendre le même principe.
La fonction javascript pourrait aussi être plus simple...

merci pour le code j'ai réussi à l'intégrer au script .
encore 2 tites questions

1/ comment mettre une image a la place de "patientez ....." , je suis perdu la
2/ ou alors si l'image bug , modifier la police d'ecriture de "patientez ...."

Cdt

lu,

1/
a la place de : var texte = 'Patientez...';
a tu essayer var texte = '<img src="lien vers image" />'; ?

2/ cela ce fait avec CSS #message_attente { proprieté css voulu }

@+

bon j'ai un petit soucis
si le code tourne seul j'ai toujours le message "patientez ............" pas de soucis c'est fonctionnel
par contre si je met le code dans une autr page via un iframe , le "patientez...." apparait que la premiere fois lors de l'access a la page .
dans le code d'upload j'ai mis un bouton "up nouvelle image" et ca recharge le module d'envoi mais la lors du up pas de message

dois je modifier quelques chose dans le code d'origine ?

impossible de l'avoir à 100% une idée ?

hum, faut voir avec les target="*truc*" suivant le nom de ton iframe, mais bon c'est moche les frames

@+

pour moi c'est pratique ca evite de recharger toute la page , juste le module

c'est bon ça fonctionne reste à mettre l'image

a tu essayer var texte = '<img src="lien vers image" />'; ?

oui ca affiche le lien <img src="lien vers image" />


en dessous de

var texte = 'Patientez...';

je voudrais afficher une image gif ....

<?php
if (isset($_POST['ok']))
{
sleep(3);
}

?>
<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...  ';
            // 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>

<form method="post" enctype = "multipart/form-data"  ...  onsubmit = "Verif_attente('message_attente','Image/image.gif')" >

<input type="submit" name = "ok" value = "ok" />
</form>

<div id = "message_attente"><img style=" visibility:hidden" src="Image/image.gif" /></div>

Voilà j'ai ajouté un second argument à la fonction Verif_attente dans lequel tu mets le chemin de l'image par rapport au script en cours.

J'ai mis aussi cette image dans le div qui affiche le message en visibility:hidden pour permettre le chargement de l'image dès la chargement de la page.

ca plante . enfin je veux dire il se passe rien .
des que je rajoute le ligne image ca affiche plus rien .
le script fonctionne mais j'ai plus de message

j'ai remis le script d'origine et ajouté juste la partie image dans le script java

<script type="text/javascript">
function Verif_attente(id_attente)    {              
        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 ..........'; 	
  	    // 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);
        }
}

si je rajoute la partie "noeud image" sans modifier le FORM il se passe plus rien , par contre si je vire la partie "noeud image" la ca remarche

Testes le code que je t'ai donné dans une page séparée. Chez moi il fonctionne.

Evidemment pour qu'une image s'affiche il faut que tu mette le chemin de ton image comme deuxième paramètre dans l'appel à la fonction
onsubmit = "Verif_attente('message_attente','Image/image.gif')" dans le formulaire. Dans cet exemple dossier "Image" et le nom de l'image "image.gif"

Et tu remet ce même chemin dans le fichier source image de la ligne
<div id = "message_attente"><img style=" visibility:hidden" src="Image/image.gif" /></div>