Fusionner un formulaire d'envoi de données et un autre d'upload de fichier

**devalender** · 09/03/2016, 21h15

Bonsoir a tous
j'aimerai monter un formulaire unique qui associe un d'envoi des données et un autre qui permet d'uploader une photo. J'ai chercher sur les forums mais un peu difficile de trouver une réponse qui me convient.

Voici mon formulaire d'envoi des données :

Code PHP :

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
 
<form method="post" action="verif.php" class="form">
<div class="information">
<p>
REMPLISSEZ LE FORMULAIRE CI-DESSOUS POUR DEBUTER
</p>
</div>
<br/>
        <fieldset >
        <legend>Informations Personnelles</legend>
        <p><label></label><font color="red">Matricule (Si connu)....: <input type="text" name="Mat_name" id="Mat_name" size=20px /></font></p>
		<p><label></label><font color="red">N° Table (BAC)*..........: <input type="number" name="bac_name" id="bac_name" size= 40px required="required"/></font></p>
        <p><label></label><font color="red">Nom*.........................: <input class="majusculeb" type="text" name="first_name" id="first_name" size= 30px required="required"/></font></p>
        <p><label></label><font color="red">Prénoms*...................: <input class="majusculea" type="text" name="last_name" id="last_name" size= 69px required="required"/></p>
        <p><label></label><font color="red">Date de Naissance*... : <input type="date" name="last_naiss" id="last_naiss" size= 15px placeholder="EX : 01/01/2000" required="required"/></font></p>
        <p><label></label><font color="red">Lieu de Naissance*.... : <input class="majusculeb" type="text" name="last_lieu" id="last_lieu" size= 50px required="required"/></font></p>
        <p><label></label><font color="red">Sexe*....................... :</font>
 
	<div id="submit">
        <input type="submit" value="Envoyer" />
        <input type="reset" value="Rétablir" />
    </div>
 
</form>

et voici celui qui va me permettre d'uploader la photo

Code PHP :

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

1
2
3
4
5
6
7
 
<form method="post" enctype="multipart/form-data" action="upload.php">
<p>
<input type="file" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader">
</p>
</form>

Je vois pas comment m’y prendre pour l'envoi des données et dans le même temps de la photo.

En faite ici je veux uploader au moins 2 fichiers en même temps mais pour le moment je me contente pour comprendre d’utiliser un seul upload.

Merci de m’aider ou de me donner un exemple ou une tuto.

**sabotage** · 09/03/2016, 21h34

Tu dois simplement mettre les input du premier formulaire dans ton deuxième.
Je ne vois pas bien ce que tu as essayé ni ce que te bloque.

**devalender** · 09/03/2016, 22h08

En faite ici je ne voyais pas comment combiner les inputs. La logique voudrais que le input du chargement de la photo soit avant celui du premier formulaire.
je revoir tout ça et vous revenir.

le debut du formulaire sera de ce type ? :

Code PHP :

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

<form method="post" enctype="multipart/form-data" action="fusion de verif.php+upload.php" class="form">

Merci

**ABCIWEB** · 10/03/2016, 04h38

L'attribut action doit pointer vers un fichier unique. Et donc dans ce fichier unique tu feras le traitement de l'upload des fichiers et des champs textes du formulaire.

Et tu ne "combine" pas des inputs, tu ajoutes des input de type text dans le formulaire contenant ton input de type file.

Si tu veux dissocier les deux traitements il faut faire deux formulaires, les regrouper à l'intérieur d'un ensemble pour qu'ils ne forment qu'un formulaire aux yeux du visiteur, puis envoyer "onsubmit" un premier formulaire en ajax et, au retour de la réponse serveur, déclencher automatiquement la soumission du second formulaire.
Cela peut être utile si tu dois vérifier des informations et rejeter le formulaire si certains champs textes sont incorrects. Cela évite au visiteur d'avoir à attendre la fin du téléchargement des fichiers avant d'avoir une réponse indiquant de modifier des informations...

**devalender** · 10/03/2016, 09h21

Envoyé par ABCIWEB

L'attribut action doit pointer vers un fichier unique. Et donc dans ce fichier unique tu feras le traitement de l'upload des fichiers et des champs textes du formulaire.

Ca je lai bien compris ! merci

Envoyé par ABCIWEB

Et tu ne "combine" pas des inputs, tu ajoutes des input de type text dans le formulaire contenant ton input de type file.

Je ne vois pas bien comment le faire.

Envoyé par ABCIWEB

Si tu veux dissocier les deux traitements il faut faire deux formulaires, les regrouper à l'intérieur d'un ensemble pour qu'ils ne forment qu'un formulaire aux yeux du visiteur, puis envoyer "onsubmit" un premier formulaire en ajax et, au retour de la réponse serveur, déclencher automatiquement la soumission du second formulaire.

N'ayant jamais utilisé ajax j'avoue que je suis un peu larguer ! pourrais je avoir un exemple ou une tuto sur le mode de fonctionnement décrit plus haut ?

Merci pour vos réponses.

**devalender** · 10/03/2016, 21h00

Après modification de mon code :
Les deux formulaires composés :

Code HTML :

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
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Author" content="Author" />
<meta name="Robots" content="index,follow" />
<meta name="Description" content="Description" />
<meta name="Keywords" content="key, words" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<title>GROUPE TEST</title>
</head>
<body>
<form method="post" action="verif.php" enctype="multipart/form-data" class="form">
<div class="information">
<p>
REMPLISSEZ LE FORMULAIRE CI-DESSOUS POUR DEBUTER
</p>
</div>
<br/>
        <fieldset >
        <legend>Informations Personnelles</legend>
        <p><label></label><font color="red">Matricule (Si connu)....: <input type="text" name="Mat_name" id="Mat_name" size=20px /></font></p>
		<p><label></label><font color="red">N° Table (BAC)*..........: <input type="number" name="bac_name" id="bac_name" size= 40px required="required"/></font></p>
        <p><label></label><font color="red">Nom*.........................: <input class="majusculeb" type="text" name="first_name" id="first_name" size= 30px required="required"/></font></p>
        <p><label></label><font color="red">Prénoms*...................: <input class="majusculea" type="text" name="last_name" id="last_name" size= 69px required="required"/></p>
        <p><label></label><font color="red">Date de Naissance*... : <input type="date" name="last_naiss" id="last_naiss" size= 15px placeholder="EX : 01/01/2000" required="required"/></font></p>
        <p><label></label><font color="red">Lieu de Naissance*.... : <input class="majusculeb" type="text" name="last_lieu" id="last_lieu" size= 50px required="required"/></font></p>
        <p><label></label><font color="red">Sexe*....................... :</font>
        </fieldset>
 
	<div id="submit">
    <input type="file" name="fichier" size="30">
    <input type="submit" name="upload" value="Soumettre"> <input type="reset" value="Rétablir" />
    </div>
</body>
</html>

Le code de verif.php

Code PHP :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<?php
$insert_query = "INSERT INTO mesinfos (".
							" matricule, ".
							" num_tab, ".
							" nom_info, ".
							" prenom_info, ".
							" date_nais, ".
							" lieu_nais, ".
							" tel_info, ".
							" sexe_info ".
						") VALUES (".
							" :Mat_name, ".
							" :bac_name, ".
							" :first_name, ".
							" :last_name, ".
							" :last_naiss, ".
							" :last_lieu, ".
							" :last_tel, ".
							" :last_sex ".
						");";	
 
	    try {
 
		$stmt = $pdo->prepare($insert_query);
		$stmt->bindParam(':Mat_name', $Mat_name, PDO::PARAM_STR);
		$stmt->bindParam(':bac_name', $bac_name, PDO::PARAM_INT);
		$stmt->bindParam(':first_name', $first_name, PDO::PARAM_STR);
		$stmt->bindParam(':last_name', $last_name, PDO::PARAM_STR);
		$stmt->bindParam(':last_naiss', $last_naiss, PDO::PARAM_STR);
		$stmt->bindParam(':last_lieu', $last_lieu,	PDO::PARAM_STR);
		$stmt->bindParam(':last_tel', $last_tel, PDO::PARAM_STR);
		$stmt->bindParam(':last_sex', $last_sex, PDO::PARAM_STR);	
		$stmt->execute();
 
		echo'INSERTION AVEC SUCCES';
 
		} 
		catch (PDOException $e) { echo 'Erreur SQL : '. $e->getMessage().'<br/>'; die(); }
 
//*****************************************************************************
if( ! isset($_POST['upload']) ) // si formulaire soumis
{
echo 'formulaire non soumis';
}
else
{
    $content_dir = 'ledossier/'; // dossier où sera déplacé le fichier
 
    $tmp_file = $_FILES['fichier']['tmp_name'];
 
    if( !is_uploaded_file($tmp_file) )
    {
        exit("Le fichier est introuvable");
    }
 
    // on vérifie maintenant l'extension
    $type_file = $_FILES['fichier']['type'];
 
    if( !strstr($type_file, 'jpg') && !strstr($type_file, 'jpeg') && !strstr($type_file, 'bmp') && !strstr($type_file, 'gif') )
    {
        exit("Le fichier n'est pas une image");
    }
 
    // on copie le fichier dans le dossier de destination
    $name_file = $_FILES['fichier']['name'];
 
    if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
    {
        exit("Impossible de copier le fichier dans $content_dir");
    }
 
    echo "Le fichier a bien été uploadé";
}
 
//*****************************************************************************
?>

Au clic sur le bouton Soumettre l'insertion en base se fais correctement mais pas l'upload des images

Merci de m'aider a y voir plus claire !

**ABCIWEB** · 10/03/2016, 23h34

Salut,

Faut faire du débuggage -> Mets des echo à l'intérieur de tes conditions pendant la phase de débugage pour voir où le code passe et où il ne passe pas. Par exemple :

Code php :

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

1
2
3
4
5
6
7
8
9
10
//...
if( ! isset($_POST['upload']) ) // si formulaire soumis
{
    echo 'formulaire non soumis';
}
else
{
    echo 'début du traitement du fichier ok';
    $content_dir = 'ledossier/'; // dossier où sera déplacé le fichier
//...

et ainsi de suite.

Et au départ testes avec des petites photos de moins de 1 Mo (que tu auras réduites dans n'importe quel logiciel photo - au besoin photofiltre est gratuit, simple et suffisant pour faire ces travaux basiques). En cas de bug, cela permettra d'être certain qu'il s'agit bien d'un problème de code et non pas d'une limitation serveur.

**devalender** · 11/03/2016, 09h49

merci a tous je pense que tout marche correctement, j'avais une version de fichiers différents

pour script php

**ABCIWEB** · 11/03/2016, 18h16

Salut,

Et pour la seconde solution qui consiste à dissocier les formulaires pour initialiser automatiquement l'upload uniquement si les champs du formulaire sont corrects, soit tu apprends les bases d'ajax, soit tu peux utiliser ce module d'uplod complet.
Il y a une quinzaine d'exemples tous fonctionnels, et celui qui correspond le mieux à ce cas de figure se nomme "UploadAjaxABCI_Inscription_Photo_Crop.php" : c'est un formulaire d'inscription qui permet de charger un avatar (que l'on peut éventuellement recadrer avant l'upload).

Fusionner un formulaire d'envoi de données et un autre d'upload de fichier

Discussions similaires

Partager

Partager