Page 1 sur 2

valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 05 mai 2010, 23:47
par wwwbillgates
Bonjour à tous je souhaiterais faire un truc qui me paraissait simple et qui pourtant est bien compliqué, arf!
Je souhaiterais pouvoir valider mon formulaire d'upload de type "file" sans avoir à cliquer sur le bouton "submit". Alors voila mon code qui est un mix de tout ce que j'ai pus trouver sur le net mais ca fonctionne toujours pas ? :(
<form method="post" name="form" enctype="multipart/form-data" action="#">
<p>
<!---- Taille maxi de l'upload en octets ---->
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
		
<input onchange="document.form.submit();" type="file" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader">
</p>
</form>

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 02:15
par AB
Si c'est pas sur un bouton de type submit que tu veux valider ton formulaire,
c'est sur quelle action alors ?

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 02:27
par Dr@ke
[Petit hors sujet]
Marrant ton site mabouille. com :wink:
(Dans le bon sens là)
[Fin]

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 10:49
par wwwbillgates
Merci Dr@ke :wink:

Sinon pour répondre à AB il suffierai de cliquer sur le bouton parcourir, là la fenetre pour choisir le fichier s'ouvre, normal :) et ca serai lorsque l'on clic sur ouvrir que le fichier est automatiquement soumis, sans l'on ai à cliquer sur le bouton "uploader"... Je sais que c'est possible mais je sais pas comment, ausecour :(

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 11:01
par stealth35
Merci Dr@ke :wink:

Sinon pour répondre à AB il suffierai de cliquer sur le bouton parcourir, là la fenetre pour choisir le fichier s'ouvre, normal :) et ca serai lorsque l'on clic sur ouvrir que le fichier est automatiquement soumis, sans l'on ai à cliquer sur le bouton "uploader"... Je sais que c'est possible mais je sais pas comment, ausecour :(
chez moi ca marche (FF 3.6 - XP)

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 11:21
par Genova
Utilise l'évènement onchange sur ton champ file, car l'évènement sera appelé après le choix du fichier (alors que onclick intervient avant la sélection du fichier). A ce moment là dans ton évènement onchange tu soumets ton formulaire en Javascript (méthode submit() sur l'élément de ton formulaire).

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 11:26
par wwwbillgates
Utilise l'évènement onchange sur ton champ file, car l'évènement sera appelé après le choix du fichier (alors que onclick intervient avant la sélection du fichier). A ce moment là dans ton évènement onchange tu soumets ton formulaire en Javascript (méthode submit() sur l'élément de ton formulaire).
Heuuuuu! c'est pas ça que j'ai fais 8-| ???

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 12:01
par Genova
Toutes mes excuses, j'ai été trop vite dans ma réponse.

Je viens de tester ton code sous Firefox, Chrome et Internet Explorer 8 : ça fonctionnait sans soucis.

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 12:12
par wwwbillgates
Bah mince moi jlai testé sous IE6 et Firefox et ca veux pas marcher :(
et jvois pas d'ou ça peut venir puisque lorsque je retire onchange="document.form.submit();" etque je choisi une photo et que je clique sur uploader alors ça fonctionne... Laà je seche je nvois vraiment pas d'ou ca peut venir :cry:

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 17:08
par AB
J'ai testé ça dans une page séparée et ça fonctionne aussi bien sous FF3.6 que sous IE6
<?php print_r($_FILES);?>
<form method="post" id="form_file" enctype="multipart/form-data" action="#">
<p>
<!---- Taille maxi de l'upload en octets ---->
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
               
<input  type="file" onchange="document.getElementById('form_file').submit()" name="fichier" size="30">

</p>
</form>
J'ai juste remplacé name="form" par id="form_file" et donc également "document.form.submit()" par "document.getElementById('form_file').submit()" simplement parce qu'un "name" n'est pas valide en html strict dans une déclaration de formulaire, mais l'ancien code, bien que non valide strict, fonctionnait quand même.
Le problème doit donc venir d'ailleurs dans ton code.

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 18:13
par wwwbillgates
bon bas j'arrive vraiment pas à trouver le problème, voici le code complet de ma page :
Car j'comprend pas car dès de je retire onchange="document.getElementById('form_file').submit()" et que je clique sur le bouton l'envoi se fait correctement :cry:

<?php session_start(); ?>
<!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" >
   <head>
       <title>&#8362; Une idée cadeau original pour un anniversaire et des cadeaux Personnalisés de départ à la retraite.</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="description" content="Idée cadeau original pour homme. La boutique des cadeaux originaux pour femme. Idée cadeaux pour anniversaire, noël, saint valentin, départ en retraite...">
	   <meta name="keywords" content="anniversaire, aniversaire, aniverssaire, idée cadeau, idée cadeaux, idées cadeaux, idee, idée, idées,idee,cadeau, cadeaux, original, cadeau original, originaux, cadeaux originaux, sympathique, caricature, carricature, caricature, insolites, carte personnalisée, perssonalisee, rigolo, pas cher, fun">

	   
   </head>
	
<body>
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="../../templates/css/pages.css" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="../../templates/css/etape3.css" />



<!-------------------->
<!---- Menu haut
<!-------------------->   
<!--connexion mysql-->
<?php include("../../class/basededonneeDB.php"); ?>
<!--fonctions-->
<?php include("../../includes/functions/functions.php"); ?>
<!--menu du haut-->
<?php include("../../templates/pages/menu_haut.php"); ?>
<!--script POPUP-->
<?php include("../../includes/scripts/popup.php"); ?>





<!---- page blanche début ---->
<div id="page_blanche">





<!---- Frise ---->
<p >
<img src="../../interface/frise_1.gif" />
<img src="../../interface/frise_2.gif" />
<img src="../../interface/frise_3.gif" />
<img src="../../interface/frise_4off.gif" />
<img src="../../interface/frise_5off.gif" />
<img src="../../interface/frise_6off.gif" />
<img src="../../interface/frise_7off.gif" />
</p>



<br />



<!---- Introduction ---->
<p>
	Description de vos photos...
</p>



<?php
// Créer une erreur si on veut changer la quantité de photos par le GET
if ($_SESSION['nb_de_photos'] < $_GET['nombre_photos'])
{
	header("Location: http://www.photos.com/");
}
?>

















<?php
  /********************************************/
 /*** Présentation de la mise en situation
/********************************************/
				// Insertion à l'aide d'une requête préparée
				$reponse = $bdd->prepare("
										SELECT *
										FROM photos_situations
										JOIN photos_prix
										ON objet = 'miseensituations'
										WHERE id = :id
										ORDER BY ordre
										");
				$reponse->execute(array('id' => $_GET['id']));



while ($donnees = $reponse->fetch())
{

	//Nom du fichier image sans l'extension .jpg
	$image_sans_lextension = explode('.', $donnees['image']);




	?>
	<div class="divdescription" >
		<p><img src="../../thumb/<?php echo $image_sans_lextension[0] . '_' . $_GET['nombre_photos'] . '.jpg'; ?>" alt="Image de la mise en situation." /></p>
	<p class="description" >


		<strong>
			<?php echo $donnees['titre']; ?>
		</strong>







	<?php
		  /*********************************/
		 /*** Opération calcul du prix
		/*********************************/
			$prix_miseensituation = $donnees['prix'] + ($_GET['nombre_photos'] * 30 - 30);

		//Sessions
			$_SESSION['prix_de_la_mise_en_situation'] = $prix_miseensituation;
			$_SESSION['nom_de_la_mise_en_situation'] = $donnees['titre'];
	?>


		
		
		
		

	<span class="prix" ><?php echo $prix_miseensituation; ?> €</span><br />

	<?php echo nl2br($donnees['description']); ?>

	</p>
	</div>
	<?php
}


	
	
	
  /********************************************/
 /*** Afficher les boites de description
/********************************************/

	$nombre_de_lignes = 1;


	while ($nombre_de_lignes <= $_GET['nombre_photos'])
	{

		?>
		<!---- début boite de description photos---->
		<div class="boite_avec_nb_photos_restantes" >


		<p><span class="texte_nb_photos_restantes" >Description de la photo<?php echo $nombre_de_lignes . '/' . $_GET['nombre_photos']; ?></p></span>





		<div id="boite_description_photos">
		 

		<p class="cartouche_noir" ><img src="../../interface/txt_description_a.gif" alt="Déscription d'une photos" /></p>
		
		<br />
		
		<p>
			<label for="pseudo"><strong>Pseudo de la photo: </strong></label> <input size="13" maxlength="30" type="text" name="pseudo" id="pseudo" />
		</p>

		 
		<p>
			<strong>Envoyer les photos de la personne à transformer<br />
			(au moins 1 photo obligatoire, maximum 10mo) :</strong>
		</p>
		
		
		
		
		<?php print_r($_FILES);?>
<form method="post" id="form_file" enctype="multipart/form-data" action="#">
<p>
               
<input  type="file" onchange="document.getElementById('form_file').submit()" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader">
</p>
</form>


				
		
		
		<?php
		  /*************************************/
		 /*** Valeurs du formulaire d'upload
		/*************************************/		
		if( isset($_POST['upload']) )
		{
			// variables disponibles
						$nom_photo = $_FILES['fichier']['name']; //Le nom original du fichier, comme sur le disque du visiteur, (exemple: mon_icone.png).
						$extension_photo = $_FILES['fichier']['type']; //Le type du fichier. Par exemple, cela peut être "image/png"
						$taille_fichier = $_FILES['fichier']['size']; //La taille du fichier en octets
						$fichier_tmp = $_FILES['fichier']['tmp_name']; //L'adresse vers le fichier uploadé dans le répertoire temporaire
						$erreur = $_FILES['fichier']['error']; //Le code d'erreur, qui permet de savoir si le fichier a bien été uploadé	
			// dossier photos
						$dossier_photos = '../../photos/'; 
			// on vérifie si le fichier temporaire est présent
						if( !is_uploaded_file($fichier_tmp) )
						{
							exit("Le fichier est introuvable.");
						}
			// on vérifie l'extension
						if( !strstr($extension_photo, 'jpg') and !strstr($extension_photo, 'jpeg') and !strstr($extension_photo, 'bmp') and !strstr($extension_photo, 'gif') and !strstr($extension_photo, 'png') and !strstr($extension_photo, 'tiff'))
						{
							exit("Les fichiers avec l'extension $extension_photo ne sont pas autorisés.");
						}
			// on vérifie le poid maximum de la photo (10mo)
						if ($taille_fichier > 10000000)
						{
							exit("Votre photo est trop volumineuse, merci d'en réduire la taille.");
						}
			// on vérifie la taille minimum de la photo en pixels (100x100px)			
						$taille_photo = getimagesize($fichier_tmp);
						if ($taille_photo[0] < 100 OR $taille_photo[1] < 100)
						{
							exit("Votre photo est trop petite, merci d'en choisir une de meilleure qualité.");
						}
			// On renomme le fichier puis on le copie dans le dossier de destination
						$nom_photo_renomme = md5(uniqid(rand(), true)); // uniquid() Génère un identifiant unique basé sur la date et heure courante en microsecondes.
						$extension_photo = strtolower(strrchr($nom_photo, '.')); //strrchr renvoie l'extension avec le point // strtolower met l'extension en minuscule
						$nom_photo_renomme_avec_extension = $nom_photo_renomme . $extension_photo;
						
						
						if( !move_uploaded_file($fichier_tmp, $dossier_photos . $nom_photo_renomme_avec_extension) )
						{
							exit("Une erreur s'est produite, impossible de copier le fichier dans $dossier_photos");
						}
			//Envoi en cours, merci de patienter...
			$_SESSION['photos']['photo']['boite_1']['photo_1'] = $nom_photo_renomme_avec_extension;
			echo 'Votre photo a bien été envoyée.';
		}
		?>

		
		<?php
		  /***************************************************/
		 /*** Création de miniatures avec la librairie GD
		/***************************************************/	
		if(isset($_SESSION['photos']['photo']['boite_1']['photo_1']))
		{		
			$source = imagecreatefromjpeg('../../photos/' . $nom_photo_renomme_avec_extension); // La photo est la source
			$destination = imagecreatetruecolor(100, 100); // On crée la miniature vide

			// Les fonctions imagesx et imagesy renvoient la largeur et la hauteur d'une image
			$largeur_source = imagesx($source);
			$hauteur_source = imagesy($source);
			$largeur_destination = imagesx($destination);
			$hauteur_destination = imagesy($destination);

			// On crée la miniature
			imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination, $hauteur_destination, $largeur_source, $hauteur_source);

			// On enregistre la miniature sous le nom "mini_couchersoleil.jpg"
			imagejpeg($destination, '../../photos/thumb/' . $nom_photo_renomme . '.jpg');
		}
		?>
			

		<?php
		  /***************************************************/
		 /*** Affichage de la miniature si la photo existe
		/***************************************************/
		function affichage_miniature($numero_photo)
		{
			if(isset($_SESSION['photos']['photo']['boite_1']['photo_1']) == null)
			{
				echo '<img src="../../interface/upload.jpg" alt="Miniature du téléchargement de la photo." />';
			}
			else
			{
				echo '<img src="../../photos/thumb/' . $_SESSION['photos']['photo']['boite_1']['photo_' . $numero_photo] . '" alt="Miniature du téléchargement de la photo." />';
			}
		}
		?>

		

		
		
		
		<div class="miniature_photo" >
			<?php affichage_miniature(1) ?>
			<div class="parcourirdiv" ><img class="parcourirdiv" src="../../interface/bt_parcourir.gif" id="imgparc1<?php echo $nombre_de_lignes ?>" /><input type="file" class="parcourir" id="upfile_0" name="upfile_0" value="" OnMouseOver="imgparc1<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir_push.gif';" OnMouseOut="imgparc1<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir.gif';" /></div>
			<img src="../../interface/bt_supprimerphoto.gif" onMouseOver="this.src='../../interface/bt_supprimerphoto_push.gif';" onMouseOut="this.src='../../interface/bt_supprimerphoto.gif';" />
		</div>
		
		
		<div class="miniature_photo" >
			<?php affichage_miniature(2) ?>
			<div class="parcourirdiv" ><img class="parcourirdiv" src="../../interface/bt_parcourir.gif" id="imgparc2<?php echo $nombre_de_lignes ?>" /><input type="file" class="parcourir" id="upfile_0" name="upfile_0" value="" OnMouseOver="imgparc2<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir_push.gif';" OnMouseOut="imgparc2<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir.gif';" /></div>
			<img src="../../interface/bt_supprimerphoto.gif" onMouseOver="this.src='../../interface/bt_supprimerphoto_push.gif';" onMouseOut="this.src='../../interface/bt_supprimerphoto.gif';" />
		</div>


		<div class="miniature_photo" >
			<?php affichage_miniature(3) ?>
			<div class="parcourirdiv" ><img class="parcourirdiv" src="../../interface/bt_parcourir.gif" id="imgparc3<?php echo $nombre_de_lignes ?>" /><input type="file" class="parcourir" id="upfile_0" name="upfile_0" value="" OnMouseOver="imgparc3<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir_push.gif';" OnMouseOut="imgparc3<?php echo $nombre_de_lignes ?>.src='../../interface/bt_parcourir.gif';" /></div>
			<img src="../../interface/bt_supprimerphoto.gif" onMouseOver="this.src='../../interface/bt_supprimerphoto_push.gif';" onMouseOut="this.src='../../interface/bt_supprimerphoto.gif';" />
		</div>
		
		
		
		
		
		
		
		
		
		
		
		<p>
			<input type="checkbox" value="1" name="pas_de_photos<?php echo $nombre_de_lignes ?>" id="pas_de_photos<?php echo $nombre_de_lignes ?>" />
			<label for="pas_de_photos<?php echo $nombre_de_lignes ?>">
			Cochez cette case si vous ne parvenez pas a envoyer vos photos.<br />
			Vous les enverrez par email une fois votre commande achevée.<br />
			</label>
		</p>


		
		
		
		
		
		
		
		
		
		<br />


		<p>
			<label for="commentaire">
			<strong>Commentaires (optionnels) :</strong><br />
			ex. : Toujours mal rasé, toujours le sourire, utiliser la coiffure de la première photo,
			il porte des lunettes...
			Un texte à ajouter, des remarques à faire...
			</label><br />
			
			<textarea name="commentaire" cols="45" id="commentaire" ></textarea>
		</p>


		<br />


		<p>
			<label for="bulle">
			<strong>Si vous souhaitez ajouter un texte sous forme d'une bulle pour faire parler
			votre photo alors saisissez le ci-dessous (optionnel) :<br /></strong>
			<a href="javascript:PopupImage('../../images/bulle.jpg')" alt="Une bulle pour votre photo comme pour une bande dessinée." >voir des exemples</a><br />
			Attention à l'orthographe car le texte sera ajouté automatiquement
			</label>

			<input type="text" name="bulle" id="bulle" size="60" maxlength="100" /><br />
			(100 caractères maximum)
		</p>

		
		</div>
		</div>
		<!---- fin boite de description photos ---->
		<?php
		$nombre_de_lignes++; 
	}
	?>












<!----------------------------------------------------->
<!---- Afficher les boites de déscription magazine
<!----------------------------------------------------->   

<!---- début boite de description magazine ---->

<p class="option_magazine" >Option présentation comme une 1ère de couv' (4€ supplémentaire).</p>

<div id="boite_description_magazine">

<p class="cartouche_noir" ><img src="../../interface/txt_description_magazine.gif" alt="Description d'une photo " /></p>


<p><img class="image_mag" src="../../thumb/<?php echo $image_sans_lextension[0] . '_mag.jpg'; ?>" alt="Image de description du magazine." /></p>
<br />
<p>
<strong>Souhaitez-vous voir votre photo présentée comme une première de couv' ?</strong><br />
(ceci n'est pas un support l'envoi se fera par e-mail si vous ne choisissez pas de support à imprimer)<br />
    <input type="radio" name="oui_non" value="oui" id="oui" /> <label for="oui">oui</label>
    <input type="radio" checked="checked" name="oui_non" value="non" id="non" /> <label for="non">non</label><br />
</p>

<p>
<strong>Choisissez les textes qui devront apparaître après avoir coché "oui" :</strong><br />
Attention à l'orthographe car les textes seront ajoutés automatiquement.<br /><br />
	<label for="date"><strong>Date :</strong><br /></label> <input type="text" size="20" maxlength="40" name="date" id="date" /> (optionnel)<br />
Utile pour un anniversaire, un mariage...
</p>

<p>
	<label for="titre"><strong>Titre :</strong><br /></label> <input type="text" size="20" maxlength="40" name="titre" id="titre" /> (obligatoire)<br />
ex : Pêche ; Karine ; Bricolo...
</p>

<p>
	<label for="texte1"><strong>Texte 1 :</strong><br /></label> <input type="text" size="60" maxlength="300" name="texte1" id="texte1" /> (optionnel)<br />
ex : Meilleur pêcheur de l'année !
</p>

<p>
	<label for="texte2"><strong>Texte 2 :</strong><br /></label> <input type="text" size="60" maxlength="300" name="texte2" id="texte2" /> (optionnel)<br />
ex : Tous ses collègues lui souhaitent une bonne retraite.	   
</p>


</div>
<!---- fin boite de description magazine ---->


<p>
	<a href="../../templates/pages/etape4_supports.php" onmouseover="continuer.src = '../../interface/bt_continueror_push.gif';" onmouseout="continuer.src = '../../interface/bt_continueror.gif';"><img class="bouton_continuer" src="../../interface/bt_continueror.gif" name="continuer" ></a>
</p>


</div>
<!---- page blanche fin ---->





<!---- copyright ---->
<br />
<?php include("copyright.php"); ?>
 
 
</body>
</html>

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 18:17
par AB
As-tu essayé le précédent code dans une page séparée ? ça donne quoi ?

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 18:27
par wwwbillgates
oui lorsque jouvre l'image tokio_hotel.jpg par exemple (quelle référence :lol: ) et bien j'ai le message suivant qui s'affiche via le print_r :

Code : Tout sélectionner

Array ( [fichier] => Array ( [name] => tokio_hotel.jpg [type] => image/jpeg [tmp_name] => E:\PROGS\wampPHP\tmp\php65E.tmp [error] => 0 [size] => 61954 ) )

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 18:40
par AB
Ben alors ça fonctionne !

Tu n'as plus qu'à mettre successivement en commentaires des blocs de code de ta page finale pour voir où se situe le problème.

Re: valider formulaire "file" sans avoir à cliquer sur "submit"?

Posté : 06 mai 2010, 18:51
par wwwbillgates
Bonsang ayé jai trouvé :
Alors j'ai pris ton code AB mais j'ai pus lire sur un site que le formulaire de type file renvoyait un array $_FILES comme tu a fait pour ton print_r et apparement dès lors ou le bouton "envoyer" n'est plus utiliser on peut récupérer le $_FILES et non une variable portant le nom du bouton :P ahlala que d'aventure :D
<form method="post" id="form_file" enctype="multipart/form-data" action="#">
	<p>		   
		<input  type="file" onchange="document.getElementById('form_file').submit()" name="fichier" size="30">
	</p>
</form>



<?php
		  /*************************************/
		 /*** Valeurs du formulaire d'upload
		/*************************************/		
		if( isset($_FILES) )
		{
			// variables disponibles
						$nom_photo = $_FILES['fichier']['name'];
 ......................................
......................................
......................................
Merci à tous :wink: