inserer Upload-Ajax-ABCI dans un formulaire de saisie

Version imprimable

Bonjour

J essaie d’insérer l’outil d'upload d image Upload-Ajax-ABCI dans un formulaire de saisie

Sans Upload-Ajax-ABCI le formulaire fonctionne et le message d'erreur apparait en cas de saisie non conforme d'un champs

Quand je rajoute l’outil d'upload d image Upload-Ajax-ABCI dans un formulaire de saisie le formulaire ne fonctionne pas:
- pas de message d erreur en cas de saisie erronée
- pas d'implémentation de la table

Comment faire pour fusionner les deux parties du formulaire (saisie+image)?

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<?php
// Variable de session
// -------------------
session_start();
if (!isset($_SESSION['login']))
{
	header ('Location: index.php');
	exit();
}
 
header('Content-type: text/html; charset=UTF-8');
 
// FORMULAIRE ACTUALISATION DU TEXTE DE LA PAGE 1
// ----------------------------------------------
// Initialisation des variables
$typologie_fp7					='';
$titre_fp7						='';
$paragraphe_fp7					='';
$nom_fp7						='';
$upload_simple					='';
 
$validForm_hidden_fp7	= true;
$validForm_fp7			= true;
$MsgErreur_fp7			= '';
// ---------------------
// TRAITEMENT SI FORMULAIRE SOUMIS
if(isset($_POST['form_page7_submit'], $_POST['antiF5'], $_SESSION['antiF5']) && $_POST['antiF5']==$_SESSION['antiF5'])
{
 
	// ---------------------
	// RECUPERATION des DONNEES
	$typologie_fp7					= (isset($_POST['typologie_fp7']))?				trim($_POST['typologie_fp7']) : '';
	$titre_fp7						= (isset($_POST['titre_fp7']))?					trim($_POST['titre_fp7']) : '';
	$paragraphe_fp7					= (isset($_POST['paragraphe_fp7']))?			trim($_POST['paragraphe_fp7']) : '';
	$nom_fp7						= (isset($_POST['nom_fp7']))?					trim($_POST['nom_fp7']) : '';
	$upload_simple					= (isset($_POST['upload_simple']))?				trim($_POST['upload_simple']) : '';
 
	// ---------------------
	// Conversion du nom
	include ('16-str-replace.php');
	$nom_fp7=str_replace($cible,$rempl,$nom_fp7);
 
	// ---------------------	
	// CHAMPS OBLIGATOIRES
	$champ_obligatoire_fp7 = array();
	if ($typologie_fp7==''					|| strlen($titre_fp7)<2)						{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Typologie'; }
	if ($titre_fp7==''						|| strlen($titre_fp7)<2)						{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Titre de la réalisation'; }		
	if ($paragraphe_fp7==''					|| strlen($paragraphe_fp7)<2)					{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Descriptif'; }
	if ($nom_fp7==''						|| strlen($nom_fp7)<2)							{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Nom'; }
	if (isset($upload_simple)==FALSE)														{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Image'; }
 
	if(count($champ_obligatoire_fp7)>0)
	{
	$MsgErreur_fp7 	.= '*Champs obligatoires : '.implode(', ',$champ_obligatoire_fp7).'<br />';
	echo "<script type='text/javascript'>alert(\"Veuillez renseigner tous les champs obligatoires!\")</script>";
	}
 
	// -----------------------
	// OK SI PAS D'ERREUR
	if($validForm_fp7 === true)
	{
		// ---------------------
		if
		(
		$titre_fp7!='' && 
		$paragraphe_fp7!='' && 
		$nom_fp7!=''
		)
		{
			// ECRITURE dans la table
			include('./connexion-a2bis.php');
			//Preparer la requete
			$sql1 = 'INSERT INTO ad_realisations (typologie, titre, descriptif, nom) VALUES (?,?,?,?)';
			$requete1 = $connexion_bdd ->prepare($sql1);
			//Associer des valeurs aux place holders
			$requete1->bindValue(1, $typologie_fp7, PDO::PARAM_STR);
			$requete1->bindValue(2, $titre_fp7, PDO::PARAM_STR);
			$requete1->bindValue(3, $paragraphe_fp7, PDO::PARAM_STR);
			$requete1->bindValue(4, $nom_fp7, PDO::PARAM_STR);			
 
			//Compiler et executer la requete
			$requete1->execute();
 
			//Clore la requete preparee
			$requete1->closeCursor();
			$requete1 = NULL;
		}
 
		echo "<script type='text/javascript'>alert(\"Réalisation enregistrée.\")</script>";
 
		// ---------------------
		// On vide
		$typologie_fp7					='';
		$titre_fp7						='';
		$paragraphe_fp7					='';
		$nom_fp7						='';
		$upload_simple					='';
	}
}
 
// ---------------------
unset($_POST);			// unset: Détruit une variable
// anti-F5 (évite de re-poster le formulaire en cas de F5 ("Actualiser la page")
$_SESSION['antiF5'] = rand(100000,999999);		// rand: Génère une valeur aléatoire
// ------------------------------------------
?>
 
<?php
// Import image
// -------------------
/* 
Utilise le fichier "Php_Upload/UploadAjaxABCI_Php_Load_Redimensions_optimise.php" comme destination Ajax
*/
//session_start();
//header('Content-type: text/html; charset=UTF-8');
 
function Unique_Id()
{
    return hash("sha256",openssl_random_pseudo_bytes("128", $cstrong));
}
 
function Return_Octets($val)
{
	$val = str_replace([',',' '],['.',''],$val);
	$val = rtrim($val, "oO");
 
	$last = strtolower(substr($val,-1));
 
	switch($last)
	{
		case 't':  $val *= 1024;
		case 'g':  $val *= 1024;
		case 'm': $val *= 1024;
		case 'k':  $val *= 1024;
	}
	return $val;
}
 
$UpAbci_fragmentSize = Return_Octets('8M');
 
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = Return_Octets(min(ini_get('upload_max_filesize'),ini_get('post_max_size')));
$UpAbci_fragmentSize = !empty($UpAbci_fragmentSize) && $upload_max_filesize > $UpAbci_fragmentSize ? $UpAbci_fragmentSize : $upload_max_filesize;
 
$UpAbci_uniqidForm = Unique_Id();
 
// Jeton de formulaire (token);
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
 
<?php
// ---------------------
// REPERAGE PAGE EN COURS
// ---------------------
$page_en_cours=basename(__FILE__);
 
// ---------------------
// IP du visiteur
$ipvisiteur = $_SERVER["REMOTE_ADDR"];
// ---------------------
// Format d'affichage de la date (au choix)
$date = getdate();	// On récupère la date d'aujourd'hui.
// ---------------------
?>
 
<!DOCTYPE html> <!--on declare au validator le langage utilisé: html5-->
 
<html lang="fr">
 
<?php include("0-head.php"); ?>
 
<body>
 
<div class="container">	
 
<?php include("0-entete.php"); ?>
 
<?php include("0-menu.php"); ?>
 
	<br>
	<hr>
 
	<div class="row">
		<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
		<h1>Enregistrer une nouvelle réalisation</h1>
		Bienvenue <?php echo htmlentities(trim($_SESSION['login'])); ?> <br />
		<a href="15-admin-deconnexion.php" target="_self" title="Déconnexion">Déconnexion</a>
		<br />
		<a href="15-admin-membre.php" target="_self" title="Inscription">Retour à l'Acceuil, Administration du site</a>
		</div>
	</div>
	<br /><br /><br />
	<div class="row">
		<div class="col-lg-8">
 
		<form id="form_redim" action="16-modifier-page7.php" method="post">
			<input type="hidden" name="antiF5" value="<?php echo $_SESSION['antiF5']; ?>" />			<!--eviter les post multiples suite à F5-->
			<fieldset class="form-group">
				<label for="id_a">Typologie du client</label>
				<select name="typologie_fp7" class="form-control" id="id_a">
					<option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
					<option value="pariculier">Un particulier</option>
					<option value="collectivite">Institutionnels: collectivité, administration ou association</option>
					<option value="entreprise">Une entreprise</option>
				</select>
			</fieldset>
			<fieldset class="form-group">
				<label for="id_b">Titre de la réalisation (max 100 caractères)</label>
				<input type="text" name="titre_fp7" class="form-control" id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="<?php if(!$validForm_fp7) echo $titre_fp7; ?>">
			</fieldset>
			<fieldset class="form-group">
				<label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
				<textarea name="paragraphe_fp7" class="form-control" id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"><?php if(!$validForm_fp7) echo $paragraphe_fp7; ?></textarea>
			</fieldset>
			<fieldset class="form-group">
				<label for="id_d">Nom de l'image (max 50 caractères)</label>
				<input type="text" name="nom_fp7" class="form-control" id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="<?php if(!$validForm_fp7) echo $nom_fp7; ?>">
			</fieldset>
 
			<fieldset style="border:2px solid #000;border-radius:5px;padding:1em">
				<legend>Upload de l'image de la réalisation</legend>
				 <input type="file" name="upload_simple" multiple="multiple" />
				 <input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
				 <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
 
				 <!-- Bloc conteneur du retour d'informations -->
				 <div id="reponse_upload">
					<!--information du fichier que l'on affiche uniquement si un fichier est sélectionné, pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier-->
					 <div class="UpAbci_infosFile" style="display:none;margin-top:1em;clear:both" data-upabcicss-select-file="display:block;">
						 <hr>
 
						<span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.8em;" data-upabcicss-result="display:none">stop </span>
 
						<span class="UpAbci_name"></span><!-- nom du fichier -->
 
						<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
						<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span><!-- status (important sinon pas de retour d'information en cas d'erreur) -->
						<span class="UpAbci_imgPreview" style="float:right"></span><!-- vignettes si le poids total ne dépasse pas la config javascript définie plus bas à 100Mo  -->
 
						<p style="display:none;" data-upabcicss-result-partial="display:block">- sauvegardé : <span class="UpAbci_backup">0 Mo</span></p><!-- S'affichera si une sauvegarde existe en cas d'arrêr ou d'erreur -->
 
					 </div>
				</div>
			</fieldset>
 
			<input type="submit" value="Enregister" name="form_page7_submit/>
 
			<div class="row">
				<div class="col-lg-12 col-md-6 col-sm-8 col-xs-12">
					<!--<button type="submit" name="form_page7_submit" class="btn btn-primary">Enregistrer</button>-->
					<?php if(!empty($MsgErreur_fp7)) { echo ('<p class="message_erreur_red">'); echo $MsgErreur_fp7; echo ('</p>'); } ?>
				</div>
			</div>
		</form>
 
		</div>
	</div>
 
</div>
 
<script src="Upload-Ajax-ABCI/Javascript/jquery.js"></script>
<script src="Upload-Ajax-ABCI/Javascript/UploadAjaxABCI.js"></script>
 
<script>
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode.
 
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
$(function(){
 
// Destination ajax de l'upload
var destination_ajax = 'Upload-Ajax-ABCI/Php_Upload/UploadAjaxABCI_Php_Load_Redimensions_optimise.php';
 
var up = new UploadAjaxABCI('#form_redim',destination_ajax,'#reponse_upload');
 
// Extensions autorisées
up.config.filesExtensions = ['jpg','jpeg','png','gif'];
 
// S'affichera si le redimensionnement et l'upload sont ok.
up.info.status.ok = "Upload et redimensionnements OK";
 
// Message d'erreur si problème serveur. Sera complété par le message renvoyé par le serveur pour plus de précision.
up.info.status.errorServer = "Echec du traitement. ";
 
// les aperçus demandent pas mal de ressource, vous devriez baisser cette valeur ou supprimer la prévisualisation pour les portables.
up.config.imgPreviewMaxSizeTotal = 100; // en Mo poids total maximum de toutes les photos. Au delà les vignettes ne seront pas affichées.
 
up.config.imgPreviewMaxWidth = 100; // en pixels, largeur maximale de l'aperçu
up.config.imgPreviewMaxHeight = 100;// en pixels, hauteur maximale de l'aperçu
 
// Démarrage de la fonction, DOM chargé
up.Start();
});
</script>
 
</body>
</html>

Cordialement

L'erreur provient de id="form_redim" dans la balise <form>

Si j'enlève id="form_redim" les saisies du formulaire sont enregistrées dans la table mais l'image n est pas uploadée
Si je laisse id="form_redim" les saisies du formulaire ne sont pas enregistrées mais l'image est uploadée

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<?php
// Variable de session
// -------------------
session_start();
if (!isset($_SESSION['login']))
{
	header ('Location: index.php');
	exit();
}
// session_start(): demarre une nouvelle session ou reprend une session existante
// $_SESSION: variables de session. Tableau associatif des valeurs stockées dans les sessions, et accessible au script courant
// header(): envoie un en-tete HTTP ... on redirige vers la page ... ou type de contenu que contient le message
 
header('Content-type: text/html; charset=UTF-8');
 
// FORMULAIRE ACTUALISATION DU TEXTE DE LA PAGE 1
// ----------------------------------------------
// Initialisation des variables
$typologie_fp7					='';
$titre_fp7						='';
$paragraphe_fp7					='';
$nom_fp7						='';
 
$validForm_hidden_fp7	= true;
$validForm_fp7			= true;
$MsgErreur_fp7			= '';
// ---------------------
// TRAITEMENT SI FORMULAIRE SOUMIS
if(isset($_POST['form_page7_submit'], $_POST['antiF5'], $_SESSION['antiF5']) && $_POST['antiF5']==$_SESSION['antiF5'])
{
 
	// ---------------------
	// RECUPERATION des DONNEES
	$typologie_fp7					= (isset($_POST['typologie_fp7']))?				trim($_POST['typologie_fp7']) : '';
	$titre_fp7						= (isset($_POST['titre_fp7']))?					trim($_POST['titre_fp7']) : '';
	$paragraphe_fp7					= (isset($_POST['paragraphe_fp7']))?			trim($_POST['paragraphe_fp7']) : '';
	$nom_fp7						= (isset($_POST['nom_fp7']))?					trim($_POST['nom_fp7']) : '';
 
	// ---------------------
	// Conversion du nom
	include ('16-str-replace.php');
	$nom_fp7=str_replace($cible,$rempl,$nom_fp7);
 
	// ---------------------	
	// CHAMPS OBLIGATOIRES
	$champ_obligatoire_fp7 = array();
	if ($typologie_fp7==''					|| strlen($titre_fp7)<2)						{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Typologie'; }
	if ($titre_fp7==''						|| strlen($titre_fp7)<2)						{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Titre de la réalisation'; }		
	if ($paragraphe_fp7==''					|| strlen($paragraphe_fp7)<2)					{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Descriptif'; }
	if ($nom_fp7==''						|| strlen($nom_fp7)<2)							{$validForm_fp7 = false;	$champ_obligatoire_fp7[] = 'Nom'; }
 
	if(count($champ_obligatoire_fp7)>0)
	{
	$MsgErreur_fp7 	.= '*Champs obligatoires : '.implode(', ',$champ_obligatoire_fp7).'<br />';
	echo "<script type='text/javascript'>alert(\"Veuillez renseigner tous les champs obligatoires!\")</script>";
	// "\\n" pour aller a la ligne: "\n" n'est pas pris en compte dans la chaine de caractères car l'antislash en php permet d'afficher des caractères spéciaux dans une chaîne de caractères
	}
 
	// -----------------------
	// OK SI PAS D'ERREUR
	if($validForm_fp7 === true)
	{
		// ---------------------
		if
		(
		$titre_fp7!='' && 
		$paragraphe_fp7!='' && 
		$nom_fp7!=''
		)
		{
			// ECRITURE dans la table
			include('./connexion-a2bis.php');
			//Preparer la requete
			$sql1 = 'INSERT INTO ad_realisations (typologie, titre, descriptif, nom) VALUES (?,?,?,?)';
			$requete1 = $connexion_bdd ->prepare($sql1);
			//Associer des valeurs aux place holders
			$requete1->bindValue(1, $typologie_fp7, PDO::PARAM_STR);
			$requete1->bindValue(2, $titre_fp7, PDO::PARAM_STR);
			$requete1->bindValue(3, $paragraphe_fp7, PDO::PARAM_STR);
			$requete1->bindValue(4, $nom_fp7, PDO::PARAM_STR);			
 
			//Compiler et executer la requete
			$requete1->execute();
 
			//Clore la requete preparee
			$requete1->closeCursor();
			$requete1 = NULL;
		}
 
		echo "<script type='text/javascript'>alert(\"Réalisation enregistrée.\")</script>";
 
		// ---------------------
		// On vide
		$typologie_fp7					='';
		$titre_fp7						='';
		$paragraphe_fp7					='';
		$nom_fp7						='';
	}
}
 
// ---------------------
unset($_POST);			// unset: Détruit une variable
// anti-F5 (évite de re-poster le formulaire en cas de F5 ("Actualiser la page")
$_SESSION['antiF5'] = rand(100000,999999);		// rand: Génère une valeur aléatoire
// ------------------------------------------
?>
 
<?php
// Import image
// -------------------
/* 
Utilise le fichier "Php_Upload/UploadAjaxABCI_Php_Load_Redimensions_optimise.php" comme destination Ajax
*/
//session_start();
//header('Content-type: text/html; charset=UTF-8');
 
function Unique_Id()
{
    return hash("sha256",openssl_random_pseudo_bytes("128", $cstrong));
}
 
function Return_Octets($val)
{
	$val = str_replace([',',' '],['.',''],$val);
	$val = rtrim($val, "oO");
 
	$last = strtolower(substr($val,-1));
 
	switch($last)
	{
		case 't':  $val *= 1024;
		case 'g':  $val *= 1024;
		case 'm': $val *= 1024;
		case 'k':  $val *= 1024;
	}
	return $val;
}
 
$UpAbci_fragmentSize = Return_Octets('8M');
 
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = Return_Octets(min(ini_get('upload_max_filesize'),ini_get('post_max_size')));
$UpAbci_fragmentSize = !empty($UpAbci_fragmentSize) && $upload_max_filesize > $UpAbci_fragmentSize ? $UpAbci_fragmentSize : $upload_max_filesize;
 
$UpAbci_uniqidForm = Unique_Id();
 
// Jeton de formulaire (token);
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
 
<?php
// ---------------------
// REPERAGE PAGE EN COURS
// ---------------------
$page_en_cours=basename(__FILE__);
 
// ---------------------
// IP du visiteur
$ipvisiteur = $_SERVER["REMOTE_ADDR"];
// ---------------------
// Format d'affichage de la date (au choix)
$date = getdate();	// On récupère la date d'aujourd'hui.
// ---------------------
?>
 
<!DOCTYPE html> <!--on declare au validator le langage utilisé: html5-->
 
<html lang="fr">
 
<?php include("0-head.php"); ?>
 
<body>
 
<div class="container">	
 
<?php include("0-entete.php"); ?>
 
<?php include("0-menu.php"); ?>
 
	<br>
	<hr>
 
	<div class="row">
		<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
		<h1>Enregistrer une nouvelle réalisation</h1>
		Bienvenue <?php echo htmlentities(trim($_SESSION['login'])); ?> <br />
		<a href="15-admin-deconnexion.php" target="_self" title="Déconnexion">Déconnexion</a>
		<br />
		<a href="15-admin-membre.php" target="_self" title="Inscription">Retour à l'Acceuil, Administration du site</a>
		</div>
	</div>
	<br /><br /><br />
	<div class="row">
		<div class="col-lg-12 col-md-6 col-sm-8 col-xs-12">
			<?php if(!empty($MsgErreur_fp7)) { echo ('<p class="message_erreur_red">'); echo $MsgErreur_fp7; echo ('</p>'); } ?>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-8">
 
		<form id="form_redim" action="#" method="post">
				<input type="hidden" name="antiF5" value="<?php echo $_SESSION['antiF5']; ?>" />			<!--eviter les post multiples suite à F5-->
				<fieldset >
					<label for="id_a">Typologie du client</label>
					<select name="typologie_fp7"  id="id_a">
						<option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
						<option value="pariculier">Un particulier</option>
						<option value="collectivite">Institutionnels: collectivité, administration ou association</option>
						<option value="entreprise">Une entreprise</option>
					</select>
				</fieldset>
				<fieldset >
					<label for="id_b">Titre de la réalisation (max 100 caractères)</label>
					<input type="text" name="titre_fp7"  id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="<?php if(!$validForm_fp7) echo $titre_fp7; ?>">
				</fieldset>
				<fieldset >
					<label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
					<textarea name="paragraphe_fp7"  id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"><?php if(!$validForm_fp7) echo $paragraphe_fp7; ?></textarea>
				</fieldset>
				<fieldset >
					<label for="id_d">Nom de l'image (max 50 caractères)</label>
					<input type="text" name="nom_fp7"  id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="<?php if(!$validForm_fp7) echo $nom_fp7; ?>">
				</fieldset>
 
 
				<fieldset style="border:2px solid #000;border-radius:5px;padding:1em">
					<legend>Upload d'une nouvelle image</legend>
					 <input type="file" name="upload_simple" multiple="multiple" />
					 <input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
					 <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
 
					 <input type="submit" value="Enregistrer" name="form_page7_submit"/>
 
					 <!-- Bloc conteneur du retour d'informations -->
					 <div id="reponse_upload">
						<!--information du fichier que l'on affiche uniquement si un fichier est sélectionné, pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier-->
						<div class="UpAbci_infosFile" style="display:none;margin-top:1em;clear:both" data-upabcicss-select-file="display:block;">
							 <hr>
 
							<span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.8em;" data-upabcicss-result="display:none">stop </span>
 
							<span class="UpAbci_name"></span><!-- nom du fichier -->
 
							<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
							<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span><!-- status (important sinon pas de retour d'information en cas d'erreur) -->
							<span class="UpAbci_imgPreview" style="float:right"></span><!-- vignettes si le poids total ne dépasse pas la config javascript définie plus bas à 100Mo  -->
 
							<p style="display:none;" data-upabcicss-result-partial="display:block">- sauvegardé : <span class="UpAbci_backup">0 Mo</span></p><!-- S'affichera si une sauvegarde existe en cas d'arrêr ou d'erreur -->
 
						</div>
					</div>
				</fieldset>
			</form>
 
		</div>
	</div>
 
</div>
 
<script src="Upload-Ajax-ABCI/Javascript/jquery.js"></script>
<script src="Upload-Ajax-ABCI/Javascript/UploadAjaxABCI.js"></script>
 
<script>
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode.
 
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
$(function(){
 
// Destination ajax de l'upload
var destination_ajax = 'Upload-Ajax-ABCI/Php_Upload/UploadAjaxABCI_Php_Load_Redimensions_optimise.php';
 
var up = new UploadAjaxABCI('#form_redim',destination_ajax,'#reponse_upload');
 
// Extensions autorisées
up.config.filesExtensions = ['jpg','jpeg','png','gif'];
 
// S'affichera si le redimensionnement et l'upload sont ok.
up.info.status.ok = "Upload et redimensionnements OK";
 
// Message d'erreur si problème serveur. Sera complété par le message renvoyé par le serveur pour plus de précision.
up.info.status.errorServer = "Echec du traitement. ";
 
// les aperçus demandent pas mal de ressource, vous devriez baisser cette valeur ou supprimer la prévisualisation pour les portables.
up.config.imgPreviewMaxSizeTotal = 100; // en Mo poids total maximum de toutes les photos. Au delà les vignettes ne seront pas affichées.
 
up.config.imgPreviewMaxWidth = 100; // en pixels, largeur maximale de l'aperçu
up.config.imgPreviewMaxHeight = 100;// en pixels, hauteur maximale de l'aperçu
 
// Démarrage de la fonction, DOM chargé
up.Start();
});
</script>
 
</body>
</html>

Ou comment créer un bouton submit qui valide 2 formulaires en même temps:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
			<form method="post" action="#">
				<input type="hidden" name="antiF5" value="<?php echo $_SESSION['antiF5']; ?>" />			<!--eviter les post multiples suite à F5-->
				<fieldset class="form-group">
					<label for="id_a">Typologie du client</label>
					<select name="typologie_fp7" class="form-control" id="id_a">
						<option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
						<option value="pariculier">Un particulier</option>
						<option value="collectivite">Institutionnels: collectivité, administration ou association</option>
						<option value="entreprise">Une entreprise</option>
					</select>
				</fieldset>
				<fieldset class="form-group">
					<label for="id_b">Titre de la réalisation (max 100 caractères)</label>
					<input type="text" name="titre_fp7" class="form-control" id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="<?php if(!$validForm_fp7) echo $titre_fp7; ?>">
				</fieldset>
				<fieldset class="form-group">
					<label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
					<textarea name="paragraphe_fp7" class="form-control" id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"><?php if(!$validForm_fp7) echo $paragraphe_fp7; ?></textarea>
				</fieldset>
				<fieldset class="form-group">
					<label for="id_d">Nom de l'image (max 50 caractères)</label>
					<input type="text" name="nom_fp7" class="form-control" id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="<?php if(!$validForm_fp7) echo $nom_fp7; ?>">
				</fieldset>
 
				<button type="submit" name="form_page7_submit" class="btn btn-primary">Enregistrer</button>
			</form>
 
			<form id="form_redim" action="#" method="post">
				<fieldset style="border:2px solid #000;border-radius:5px;padding:1em">
					<legend>Upload d'une nouvelle image</legend>
					 <input type="file" name="upload_simple" multiple="multiple" />
					 <input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
					 <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
 
					 <input type="submit" value="Afficher"/>
 
					 <!-- Bloc conteneur du retour d'informations -->
					 <div id="reponse_upload">
						<!--information du fichier que l'on affiche uniquement si un fichier est sélectionné, pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier-->
						<div class="UpAbci_infosFile" style="display:none;margin-top:1em;clear:both" data-upabcicss-select-file="display:block;">
							 <hr>
 
							<span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.8em;" data-upabcicss-result="display:none">stop </span>
 
							<span class="UpAbci_name"></span><!-- nom du fichier -->
 
							<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
							<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span><!-- status (important sinon pas de retour d'information en cas d'erreur) -->
							<span class="UpAbci_imgPreview" style="float:right"></span><!-- vignettes si le poids total ne dépasse pas la config javascript définie plus bas à 100Mo  -->
 
							<p style="display:none;" data-upabcicss-result-partial="display:block">- sauvegardé : <span class="UpAbci_backup">0 Mo</span></p><!-- S'affichera si une sauvegarde existe en cas d'arrêr ou d'erreur -->
 
						</div>
					</div>
				</fieldset>
			</form>

24/05/2016, 02h41
binco

trop complexe? ou trop facile?
24/05/2016, 10h30
Celira

Je suppose que tu parles du module d'Upload de fichiers d'ABCIWEB ?
Tu ne peux pas envoyer deux formulaires en même temps, il faut que tu intègres ton upload de fichier dans le même formulaire que le reste.
24/05/2016, 18h44
ABCIWEB

Salut,

Comme dit Celira, le plus simple est de traiter tout ton formulaire au même endroit c'est à dire dans le code php qui traite l'upload. Tous les champs de ton formulaire sont transmis automatiquement vers le script d'upload et comme indiqué dans le mode d'emploi il suffit d'employer la fonction "urldecode" pour les récupérer.

Code:

$ma_variable = urldecode($_POST['ma_variable']);

Tout le traitement que tu fais dans le code que tu nous à montré peut être reporté et intégré dans le code php d'upload.
Tu peux regarder l'exemple de formulaire "UploadAjaxABCI_Controle_input_text.php" et le code serveur correspondant "UploadAjaxABCI_Php_Load_Controle_input_text.php" qui traitent de ce cas de figure.
L'inconvénient de cette méthode, si tu dois contrôler des champs textes en même temps que l'upload, est que le visiteur devra attendre de télécharger au moins une partie du fichier (le temps de faire un aller-retour serveur) avant d'avoir un retour d'information concernant ces champs textes. Et même s'il est possible de ne pas perdre la partie du fichier déjà chargée en cas de correction nécessaire - ce qui est l'intérêt des exemples cités plus haut - le visiteur devra néanmoins re sélectionner son fichier pour le second essai. Donc c'est plutôt réservé pour les cas où ces corrections de champs textes seront peu fréquentes.

Le plus optimisé est de faire deux formulaires qui seront traités par le même bouton submit.
On envoie d'abord le formulaire des champs textes qui doivent être contrôlés et éventuellement corrigés et quand tout est ok on soumet automatiquement le formulaire qui contient l'upload du ou des fichiers.
C'est précisément le sujet de l'exemple :
- "UploadAjaxABCI_Inscription_Photo_Crop.php" (qui contient les deux formulaires regroupés en un seul)
et des fichiers serveur correspondants
- "UploadAjaxABCI_Inscription.php" (qui vérifie les champs textes)
- "UploadAjaxABCI_Php_Load_Inscription.php" (qui fait l'upload des fichiers).

Sur le principe et pour avoir une solution optimisée, il faut donc faire deux requêtes ajax successives. Mais pas deux requêtes simultanées comme tu sembles vouloir le faire, dont l'une serait en ajax et l'autre directement adressée au serveur en rafraichissant la page (c'est par nature incompatible).

La ça se corse pour mon niveau ...

Indépendamment de ton outils le formulaire suivant fonctionne:

test1.php:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1" />
 
<title>Page test1</title>
 
</head>
<body>
 
	<form class="form_realisation" action="test1.php" method="post">
 
		<p>
			<label for="id_a">Typologie du client</label>
			<select name="typologie_fp7"  id="id_a">
				<option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
				<option value="pariculier">Un particulier</option>
				<option value="collectivite">Institutionnels: collectivité, administration ou association</option>
				<option value="entreprise">Une entreprise</option>
			</select>
		</p>
		<p>
			<label for="id_b">Titre de la réalisation (max 100 caractères)</label>
			<input type="text" name="titre_fp7"  id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="" />
		</p>
		<p>
			<label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
			<textarea name="paragraphe_fp7"  id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"></textarea>
		</p>
		<p>
			<label for="id_d">Nom de l'image (max 50 caractères)</label>
			<input type="text" name="nom_fp7"  id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="" />
		</p>
		<p>		
			<input id="btSubmit" type="submit" value="Envoyer" /> 
		</p>
	</form>
 
    <!-- retour d'informations générales du formulaire alimenté par retour ajax. -->
    <div class="message"></div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="test1_code_js.js"></script>
 
</body>
</html>

requete ajax avec test1_code_js:

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
jQuery(document).ready(function() {
 
$("#btSubmit").on('click', function(event) {
 
	var typologie_jq	= $('#id_a').find('option:selected').text();
	var titre_jq		= $('#id_b').val().trim();
	var descriptif_js	= $('#id_c').val().trim();
	var nom_js			= $('#id_d').val().trim();
 
	if (typologie_jq != 'Typologie' && titre_jq != '' && descriptif_js != '' && nom_js != '') {
		// Envoie des donnees
		$.ajax({										
		type:	'post',
		url:	'test2.php',
		data:	'typologie_aj='+typologie_jq + '&titre_aj='+titre_jq+ '&descriptif_aj='+descriptif_js + '&nom_aj='+nom_js,
		success: function(html) {					// Je récupère la réponse du fichier PHP
						$(".message").html(html);	// $(".message").html("<p>Votre saisie est enregistrée!</p>");
						}
		});
	}
 
	//else {
	//	$(".message").html("<p>Veuillez renseigner l ensemble des champs</p>");
	//}
			event.preventDefault();	// Annule l'évènement s'il est annulable, sans stopper sa propagation.
			return false;
 
});
 
});

vers test2.php:

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
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
78
79
80
81
82
<?php // AJAX
// -------------------------------------------------
if(
isset($_POST['typologie_aj']) &&
isset($_POST['titre_aj']) &&
isset($_POST['descriptif_aj'])&&
isset($_POST['nom_aj'])
)
{
	// ---------------------
	// RECUPERATION des DONNEES
	$typologie_aj			= (isset($_POST['typologie_aj']))?			trim($_POST['typologie_aj']) : '';
	$titre_aj				= (isset($_POST['titre_aj']))?				trim($_POST['titre_aj']) : '';
	$descriptif_aj			= (isset($_POST['descriptif_aj']))?			trim($_POST['descriptif_aj']) : '';
	$nom_aj					= (isset($_POST['nom_aj']))?				trim($_POST['nom_aj']) : '';
 
	$validForm_aj			= true;
	$MsgErreur_aj			= '';
 
	// ---------------------
	// Conversion du nom
	include ('16-str-replace.php');
	$nom_aj=str_replace($cible,$rempl,$nom_aj);
 
	// ---------------------	
	// CHAMPS OBLIGATOIRES
	$champ_obligatoire_aj = array();
	if ($typologie_aj=='')																		{$validForm_fp = false; $champ_obligatoire_fp[] = 'Typologie'; }
	if ($titre_aj==''			|| strlen($titre_aj)<2			|| strlen($titre_aj)>100)		{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Titre de la réalisation'; }		
	if ($descriptif_aj==''		|| strlen($descriptif_aj)<2		|| strlen($descriptif_aj)>300)	{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Descriptif'; }
	if ($nom_aj==''				|| strlen($nom_aj)<2			|| strlen($nom_aj)>50)			{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Nom'; }
 
	if (count($champ_obligatoire_aj)>0)
	{
	$MsgErreur_fp7= 'Champs obligatoires';
	// "\\n" pour aller a la ligne: "\n" n'est pas pris en compte dans la chaine de caractères car l'antislash en php permet d'afficher des caractères spéciaux dans une chaîne de caractères
	echo $MsgErreur_fp7;
	}
 
	// -----------------------
	// OK SI PAS D'ERREUR
	if($validForm_aj === true)
	{
		// ---------------------
		if
		(
		$typologie_aj			!='' && 
		$titre_aj				!='' && 
		$descriptif_aj			!='' && 
		$nom_aj					!=''
		)
		{
		// ECRITURE dans la table
		include('./connexion-a2bis.php');
		//Preparer la requete
		$sql1 = 'INSERT INTO ad_realisations (typologie, titre, descriptif, nom) VALUES (?,?,?,?)';
		$requete1 = $connexion_bdd ->prepare($sql1);
		//Associer des valeurs aux place holders
		$requete1->bindValue(1, $typologie_aj, PDO::PARAM_STR);
		$requete1->bindValue(2, $titre_aj, PDO::PARAM_STR);
		$requete1->bindValue(3, $descriptif_aj, PDO::PARAM_STR);
		$requete1->bindValue(4, $nom_aj, PDO::PARAM_STR);			
 
		//Compiler et executer la requete
		$requete1->execute();
 
		//Clore la requete preparee
		$requete1->closeCursor();
		$requete1 = NULL;
 
		$MsgErreur_fp7='Réalisation enregistrée!!';
		echo $MsgErreur_fp7;
 
		// ---------------------
		// On vide
		$typologie_aj				='';
		$titre_aj					='';
		$paragraphe_aj				='';
		$nom_aj						='';
		}
	}
}

par contre quand j’intègre tout ça ne fonctionne pas ...
coté console js: pas de message d'erreur
coté console réseau: UploadAjaxABCI_Inscription.php n apparait pas

je suis perdu

help please

16-modifier-page7.php:

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
<?php
session_start();
header('Content-type: text/html; charset=UTF-8');
 
//************************
// modifier le fichier connexion_param.php
//************************
 
// Utilise le fichier "Php_Upload/UploadAjaxABCI_Inscription.php" comme destination ajax pour l'inscription
// Utilise le fichier "Php_Upload/UploadAjaxABCI_Php_Load_Inscription.php" comme destination ajax pour l'upload
// Utilise le fichier "Php_Upload/Classes/Messages.php" pour définir les messages d'information
 
function Unique_Id()
{
    return hash("sha256",openssl_random_pseudo_bytes("128", $cstrong));
}
 
function Return_Octets($val)
{
	$val = str_replace([',',' '],['.',''],$val);
	$val = rtrim($val, "oO");
 
	$last = strtolower(substr($val,-1));
 
	switch($last)
	{
		case 't':  $val *= 1024;
		case 'g':  $val *= 1024;
		case 'm': $val *= 1024;
		case 'k':  $val *= 1024;
	}
	return $val;
}
 
$UpAbci_fragmentSize = Return_Octets('8M');
 
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = Return_Octets(min(ini_get('upload_max_filesize'),ini_get('post_max_size')));
$UpAbci_fragmentSize = !empty($UpAbci_fragmentSize) && $upload_max_filesize > $UpAbci_fragmentSize ? $UpAbci_fragmentSize : $upload_max_filesize;
 
$UpAbci_uniqidForm = Unique_Id();
 
// Jetons de formulaire
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
 
 
/********************************* IMPORTANT *******************
// Pour concentrer tous les messages dans le même endroit, les messages renvoyés directement depuis le script javascript sont dans la méthode "inscriptionClient()" du fichier "Php_Upload/Classes/Messages.php".
****************************************************************/
require 'Php_Upload/Classes/Messages.php';
// Cette variable qui est un tableau sera transmise plus bas au code javascript
$Upabci_messages_inscription = Messages::inscriptionClient();
?>
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
 
<title>UploadAjaxABCI : upload de fichiers par fragmentation avec Html5 et Ajax/Jquery/Php</title>
 
 
</head>
<body>
 
<fieldset class="inscription">
<legend>Inscription</legend>
 
    <form class="form_inscription" action="#" method="post">
 
			<label for="id_a">Typologie du client</label>
			<select name="typologie_fp7"  id="id_a">
				<option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
				<option value="pariculier">Un particulier</option>
				<option value="collectivite">Institutionnels: collectivité, administration ou association</option>
				<option value="entreprise">Une entreprise</option>
			</select>
 
			<label for="id_b">Titre de la réalisation (max 100 caractères)</label>
			<input type="text" name="titre_fp7"  id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="" />
 
			<label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
			<textarea name="paragraphe_fp7"  id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"></textarea>
 
			<label for="id_d">Nom de l'image (max 50 caractères)</label>
			<input type="text" name="nom_fp7"  id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="" />
 
        <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
    </form>
 
 
	<form class="form_avatar" action="#" method="post">    
        <input type="file" name="upload" style="display:none" />
 
        <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
        <input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
 
        <!-- les boutons personnalisés ci-dessous remplaceront les boutons d'upload standards des champs de type file grâce à l'option de configuration "config.customFileSelect" déclarée en javascript plus haut  -->
        <label class="facultatif">Avatar facultatif<br>
 
        <input type = "button" value="Cliquez ou déposez votre avatar ici" class="bouton_fichiers" /></label>
 
    	<!-- bloc conteneur des résultats -->
    	<div class="reponse_upload" style="display:none;" data-upabcicss-select-file="display:block">     
 
        <!-- bloc conteneur des informations d'un fichier (sera dupliqué par la classe si upload multiple). -->
        <div class="UpAbci_infosFile" style="font-size:0.8em" data-upabcicss-select-file="display:block;">
            <div data-upabcicss-error-img-prev="display:none"> 
            	<p>Vous pouvez recadrer votre photo si besoin</p>    
                <!-- Choix du ratio -->
                <p>               
                    <label><input type="radio" name="ratio" value="16:9" />16/9 &nbsp;</label>
 
                    <label><input type="radio" name="ratio" value="3:2" checked="checked" />3/2 &nbsp;</label>
 
                    <label><input type="radio" name="ratio"  value="4:3"/>4/3 &nbsp;</label>  
 
                    <label><input type="radio" name="ratio" value=""/>libre</label>
                </p>
 
                <!-- des blocs de type div nécessaires au crop seront insérés dans ce bloc -->
                <div class="UpAbci_imgPreview"></div>
 
            </div>
 
            <div style="margin-top:0.5em;margin-bottom:0.5em">
                    <div style="min-height:2em;">
                        <p>
                            <!-- Bouton arrêt, affiché en transparence 0.4 si résultat (= upload terminé) --> 
                             <input type="button" class="UpAbci_stop" style="display:inline-block;width:4em;border:1px solid #ccc" data-upabcicss-result="cursor:default;opacity:0.4" value="arrêt" /> 
                             <!-- nom du fichier -->
                             <span class="UpAbci_name"></span>
 
                             <!-- taille du fichier -->
                             <span class="UpAbci_size">0 Mo</span> 
                        </p>
          				<p>
                             <!-- status (en attente, ok, erreur, arrêt) -->
                             status : <span class="UpAbci_status" data-upabcicss-result-error="color:red"  data-upabcicss-result-stop="color:red" data-upabcicss-result-ok="color:green">en attente</span>
 
                            <!-- sauvegarde résultat partiel --> 
                            <span style="display:none" data-upabcicss-result-partial="display:inline"> - sauvegardé : </span><span class="UpAbci_backup" style="display:none" data-upabcicss-result-partial="display:inline"></span>                
                             <!-- progression graphique (s'affichera durant l'upload sauf pour les très petits fichiers ou si une sauvegarde existe avant l'upload) -->
                            <progress style="display:none" data-upabcicss-remaining-time-after="display:inline"  data-upabcicss-backup="display:inline" data-upabcicss-result="display:none" class="UpAbci_progressionG"></progress>
                        </p>
                    </div>
 
                	<!-- Le bloc ci-dessous s'affichera si la valeur de l'option "config.imgPreviewMaxSize" (définie plus haut dans la configuration de la classe d'upload) est dépassée -->
                    <p style="display:none;font-style:italic;min-height:2em" data-upabcicss-error-img-prev="display:block" >
                        (Image trop lourde pour permettre la prévisualisation)
                    </p>
            </div>
        </div>
 
        <!-- retour d'informations générales du formulaire d'upload alimenté par retour ajax. Ne sert pas actuellement puisque la fonction "addInfosServer()" n'est pas utilisée dans le script serveur d'upload -->
        <div class="UpAbci_infosServer" style="display:none;color:#000;font-size:1.3em;margin-bottom:1em" data-upabcicss-infos-server="display:block">
        </div>
 
    </div>   
	</form>
 
 
    <!-- retour d'informations générales du formulaire d'inscription alimenté par retour ajax. -->
    <div style="margin-top:2em" class="info_result"></div>
 
 
    <div style="margin-top:2em">
        <input id="btSubmit" type="submit" value="Envoyer" />
    </div>
 
</fieldset>
 
 
<script src="Javascript/jquery.js"></script>
 
<!-- UploadAjaxABCI.js est la version minifiée de UploadAjaxABCI_DEV.js -->
<script src="Javascript/UploadAjaxABCI.js"></script>
 
<!-- Intégration du module javascript "imgareaselect" -->
<script src="Javascript/jquery.imgareaselect-10-0-rc-1/jquery.imgareaselect.min.js"></script>
 
<!-- Variable globale renseignée en php. Contient le tableau des messsages javascript. Cette variable est chargée séparément pour permettre éventuellement d'externaliser le script javascript -->
<script>var Upabci_messages_inscription = <?=json_encode($Upabci_messages_inscription)?></script>
 
<!-- Intégration du module css "imgareaselect" -->
<link rel="stylesheet" href="Javascript/jquery.imgareaselect-10-0-rc-1/css/imgareaselect-default.css">
 
<script>
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode.
 
$(function(){// DOM chargé
 
// Destination ajax de l'inscription
var destination_ajax_inscription = 'Php_Upload/UploadAjaxABCI_Inscription.php';
 
// Destination ajax de l'upload
var destination_ajax_upload = 'Php_Upload/UploadAjaxABCI_Php_Load_Inscription.php';
 
/*
- Les messages transmis depuis le code javascript de cette page sont définis par
la variable php $Upabci_messages_inscription dans le fichier "Php_Upload/Classes/SetMessages.php", 
de même pour les messages renvoyés par le serveur en retour des requêtes ajax.
*/
 
// Variables utilisées dans les scripts d'envoi des données et d'envoi des fichiers
 
var form = $('.inscription'); // identifiant du conteneur des formulaires
 
// Récupération des messages transmis depuis le serveur.
var messages = typeof Upabci_messages_inscription == 'object' ? Upabci_messages_inscription : {};
 
 
var bouton_submit = form.find('input[type=submit]'); // Bouton submit.
 
var info_result = form.find('.info_result'); // identifiant des informations générales de résultat.
 
var form_C = form.find('.form_avatar'); // identifiant du formulaire d'upload/crop
 
 
 
/* --------------------------- Configuration du formulaire d'inscription ----------------------------- */
 
 
 
$("#btSubmit").on('click', function(event) {
 
	var typologie_jq	= $('#id_a').find('option:selected').text();
	var titre_jq		= $('#id_b').val().trim();
	var descriptif_js	= $('#id_c').val().trim();
	var nom_js			= $('#id_d').val().trim();
 
	if (typologie_jq != 'Typologie' && titre_jq != '' && descriptif_js != '' && nom_js != '') {
		// Envoie des donnees
		$.ajax({										
		type:	'post',
		url: destination_ajax_inscription,
		data:	'typologie_aj='+typologie_jq + '&titre_aj='+titre_jq+ '&descriptif_aj='+descriptif_js + '&nom_aj='+nom_js,
		success: function(html) {					// Je récupère la réponse du fichier PHP
						$(".message").html(html);
						}
		});
	}
 
	//else {
	//	$(".message").html("<p>Veuillez renseigner l ensemble des champs</p>");
	//}
			event.preventDefault();	// Annule l'évènement s'il est annulable, sans stopper sa propagation.
			return false;
 
});
 
 
 
 
/* ------------------------------- Configuration de l'upload et crop de fichier------------------------------ */
 
 
 
 
 
// Initialisation de l'upload de ficher et du crop => voir fichier "UploadAjaxABCI_Crop_multiple.php" pour plus d'informations 
 
var reponse_C = form_C.find(".reponse_upload"); // identifiant du conteneur général des informations d'upload
 
var name_crop_C = 'crop'; // nom du champ des crop
var name_ratio_C = 'ratio'; // nom du champ des ratios
 
/* 
NE PAS SUPPRIMER D'ELEMENTS dans l'objet suivant.
*/
// Index des input qui seront ajoutés au formulaire pour renseigner le serveur. 
var input_crop_C = {'x1':'x1','y1':'y1','width':'width','height':'height','width_preview':'width_preview','height_preview':'height_preview'};
// (chaque input est crée avec name="name_crop_C+identifiant_fichier[input_crop_C]")
 
 
// Initilisation de la classe javascript d'upload
var Up = new UploadAjaxABCI('.form_avatar',destination_ajax_upload,reponse_C);
 
// On envoie pas le formulaire d'upload si aucun fichier n'est joint (évite une requête inutile)
Up.config.submitWithoutFile = false;
 
// Permet, malgré la configuration précédente "Up.config.submitWithoutFile = false" de déclencher la fonction "config.func_FormEnd" même si aucun fichier n'est joint. Permettra d'afficher le message final de traitement du formulaire par l'intermédiaire de la fonction "func_FormEnd" même si le formulaire d'upload n'est pas envoyé (puisque l'avatar est optionnel dans l'exemple).
Up.config.submitWithoutFileFuncFormEnd = true; 
 
// Je désactive l'affichage automatique des vignettes pour maîtriser la chronologie du script
Up.config.imgPreviewStartAuto = false; // IMPORTANT
 
var dim_preview = form_C.innerWidth(); // pour gérer le content resizable
Up.config.imgPreviewMaxWidth = dim_preview; // en pixels, largeur maximale de l'aperçu de l'image
Up.config.imgPreviewMaxHeight = dim_preview; // en pixels, hauteur maximale de l'aperçu de l'image
 
//Up.config.imgPreviewMaxSize = 30; // en Mo (sans unité) Poids maxinmal d'une image. Si dépassé la vignette ne sera pas affichée.
 
Up.config.remainingTimeDisplayAfter = 2; // Pour ne pas faire afficher la barre de progression pour les très petits fichiers
 
Up.config.filesExtensions = ['jpg','jpeg','png','gif']; // Extensions autorisées EN MINUSCULES (un contrôle de sécurité supplémentaire est fait côté serveur). 
 
Up.config.customFileSelect = ".bouton_fichiers"; // Je remplace le boutons standard de sélection de fichiers du navigateur par un bouton personnalisé dont j'indique la class dans cette option. 
 
Up.config.cssFileSelectOn = "cursor:default;opacity:0.5"; // Durant le téléchargement des fichiers, applique ces styles sur les boutons de sélection des fichiers. 
 
// Dans cet exemple, afin de concentrer tous les messages dans un même endroit pour faciliter leur traduction/personnalisation je renseigne tous les messages susceptibles de s'afficher - c'est à dire les options de configuration ".info..." (cf mode d'emploi) - avec le tableau "$messages" récupéré depuis php.
Up.info.status.ok = messages.statusOk;
Up.info.status.inProgress = messages.statusInProgress;
Up.info.status.stop = messages.statusStop;
Up.info.status.errorSize = messages.statusErrorSize;
Up.info.status.errorExtension = messages.statusErrorExtension; 
Up.info.status.errorServer = messages.statusErrorServer; 
Up.info.remainingTimeComputeWaiting = messages.remainingTimeComputeWaiting;
 
 
 
// $$$$$$$$$$$ Fin des variables utilisateur paramétrables pour le crop et l'upload $$$$$$$$$$$$$$$$$
 
 
// J'utilise la fonction interne "Uniqid" pour générer une classe unique.
var class_content_input_C = Up.Uniqid('.Input_CropForm_'); // Nom de la classe qui identifiera le conteneur des inputs "crop" ajoutés au formulaire pour transmission vers le serveur. Ce bloc est créé automatiquement en js. 
 
var form_input_crop_C = $(); // conteneur des informations de crop transmises dans le formulaire
 
 
// Fonction de crop
function Crop(image, obj)
{	
	// Il faut un objet image jquery pour le crop
	var image = $(image); 	
	// On recrée l'index dynamique pour distinguer les champs dans l'upload multiple
	var sha = Up.SHA1(obj.fichier.upabciInputName + obj.fichier.name);
	// Bloc ayant la classe "UpAbci_infosFile"
	var infos_html = obj.infos_html; // bloc d'information du fichier
 
	var prev_width = image.width();// Largeur de la vignette 
	var prev_height = image.height();// Hauteur de la vignette
 
	/*
	Si inexistants, création des inputs pour récupération côté serveur. Le conteneur "form_input_crop_C" est créer chronologiquement plus tôt avec "func_FileSelectAll")
	- "input_crop_C.x1" sert pour tester le premier élément de la série des input dédiés à chaque fichier.
	*/
	if(form_input_crop_C.find('input[name="'+name_crop_C+''+sha+'['+input_crop_C.x1+']"]').length == 0)
	{
		$.each(input_crop_C, function(i,v)
		{
			form_input_crop_C.append($('<input name = "'+name_crop_C+''+sha+'['+v+']">'));			
		})						
	}
 
	// utilisée dans les switch
	var value;
 
	// Instanciation et configuration de imgAreaSelect (voir la doc dans le dossier javascript)
	var imgArea = image.imgAreaSelect({
		instance: true,
		parent: obj.obj.imgPreview, // Point d'attache correspond au bloc ayant la classe ".UpAbci_imgPreview"
		fadeDuration:350, // Attention dans l'ancienne doc sur le web l'option se nomme "fadeSpeed"
		onSelectEnd: function(img, sel) // à la fin d'une sélection, le second paramètre (ici "sel") contient les valeurs de la sélection.
		{
			/* 
			On renseigne les input dans le formulaire pour le traitement côté serveur
			(utilisez la console pour visualiser ces input qui seront créés ou modifiés dynamiquement dans le formulaire à la suite de chaque sélection dans une image).
			*/
			$.each(input_crop_C, function(i,v)
			{
				switch(i)
				{
					case 'x1' : value = sel[i]; break;
					case 'y1' : value = sel[i]; break;
					case 'width' : value = sel[i] == 1 ? 0 : sel[i]; break;			
					case 'height' : value = sel[i] == 1 ? 0 : sel[i]; break;
					case 'width_preview' : value = prev_width; break;
					case 'height_preview' : value = prev_height; break;
					default : value = false;
				}
				if(value !== false){form_input_crop_C.find('input[name="'+name_crop_C+''+sha+'['+input_crop_C[v]+']"]').val(value);}
			})
		}			
	});
 
 
	// Initialise les ratios (boutons radio) pour la fonction de crop
	infos_html.find('input[name="'+name_ratio_C+''+sha+'"]').each(function()
	{		
		// Initialise le ratio par défaut du html
		if($(this).is(":checked"))
		{
			imgArea.setOptions({aspectRatio: $(this).val()});
		}
 
		// Pour initialiser sur on click
		$(this).on('click', function()
		{
			imgArea.setOptions({aspectRatio: $(this).val()});
		})
	})
 
	// On peut ajouter d'autres options comme ci-dessous avec les carrés de sélection
	imgArea.setOptions({handles: true});
 
	// Si vous souhaiter imposer un ratio plutôt que de laisser le choix au visiteur vous pouvez faire par exemple (handle est bien entendu facultatif)
	//imgArea.setOptions({aspectRatio: '3:2',handles: true});
}
 
 
Up.config.func_FileSelectEach = function(e, data)
{
	// Toutes les informations sont dans le paramètre data
	//console.log(data);
 
	var identifiant = Up.SHA1(data.fichier.upabciInputName + data.fichier.name);
	var radio = data.infos_html.find('input[name="'+name_ratio_C+'"]');
 
	// redéfinition des noms des champs spécifiques aux fichiers avec un identifiant unique
	radio.attr('name', name_ratio_C+''+identifiant);
 
	radio.each(function()
	{
		// Réattribue le check html par défaut car au départ du fait que les boutons radios ont tous le même nom dans les différents blocs d'information, seul le dernier bloc a été coché.
		if($(this).get(0).getAttribute("checked" ) == "checked") {$(this).prop('checked', true);}
	})
 
	/* 
	A noter que les comportements programmés ci-dessous sur les boutons (ou liens) d'arrêt seront désactivés durant l'upload du fichier par la classe javascript qui imposera ses propres comportements pour optimiser une éventuelle reprise d'upload.
 
	Définition du comportement des boutons "arret" on click si pas d'erreur utilisateur et si les boutons existent.
	*/
	if (data.fichier.upabciErrorUser == 0 && data.obj.stop != undefined)
	{
		// Définition du comportement du bouton arret on click
		data.obj.stop.one('click', function()
		{
			if(data.obj.imgPreview != undefined)
			{
				var img, ias;
 
				img = data.obj.imgPreview.find("img");
				if(img.length > 0)
				{
					ias = img.imgAreaSelect({ instance: true });
					if(ias != undefined)
					{
						ias.cancelSelection();
						ias.remove();
					}
 
					// Supprime l'aspect du curseur appliqué par la classe "UpAbci_imgPreview"
					img.css('cursor','default');
				}
			}
		})
	}
}
 
 
/*
La fonction "config.func_FileSelectAll()" est appelée APRES la sélection de tous les fichiers et l'affichage des nouvelles informations et donc après la fonction "config.func_FileSelectEach". 
- Création dans le formulaire d'un div conteneur des inputs spécifiques au crop. Les inputs seront renseignés par la fonction Crop.
- Et l'on fait afficher les images de prévisualisation avec Up.func_ImgPreviewStartAll();
*/
Up.config.func_FileSelectAll = function(e, data)
{
	//console.log(data);
	form_input_crop_C = form_C.find(class_content_input_C); // conteneur des inputs "crop" créé en javascript (variable "form_C" définie lors de l'initialisation de la classe).
 
	// Si le conteneur n'existe pas...  
	if(form_input_crop_C.length == 0)
	{
		// Je le crée
		form_C.append('<div class="'+class_content_input_C.substr(1)+'" style="display:none"></div>');
		// Et je récupère le sélecteur identifiant
		form_input_crop_C = form_C.find(class_content_input_C);
	}
 
	// On fait afficher les vignettes de prévisualisation avec la fonction "func_ImgPreviewStartAll" (qui ne fonctionne que si "config.imgPreviewStartAuto = false")
	Up.func_ImgPreviewStartAll();
}
 
 
 
/* Utilisation de la fonction évènementielle "func_ImgPreviewLoadEach" qui est appelée pour chaque image de prévisualisation quand elle est chargée. 
- J'initialise la fonction de crop.
*/
Up.config.func_ImgPreviewLoadEach = function(image, obj)
{		
	setTimeout(function(){Crop($(image), obj)}, 150);
}
 
 
/* La fonction événementielle "func_FormSubmit" est appelée lors de la soumission du formulaire. Cependant elle ne sera pas appellée ici si aucun fichier n'est joint puisque j'ai utilisé l'option de configuration config.submitWithoutFile = false.
 
- Je gèle les crop.
- Met le curseur par défaut au survol de l'image
*/
Up.config.func_FormSubmit = function(e,data) // data contient un objet d'information pour chaque fichier
{
	var img, ias;
	$.each(data, function(i,v)
	{
		if(v.obj.imgPreview != undefined)
		{
			img = v.obj.imgPreview.find("img");
			if(img.length > 0)
			{
				ias = img.imgAreaSelect({instance: true});
				if(ias != undefined)
				{
					// gèle le crop
					ias.setOptions({persistent: true, movable: false, resizable: false, handles: false});
					// Supprime l'aspect du curseur appliqué par le corp (classe "imgareaselect-outer") 
					v.infos_html.find(".imgareaselect-outer").css('cursor','default');
				}
 
				// supprime l'aspect du curseur appliqué par la clase "UpAbci_imgPreview img" 
				img.css('cursor','default');
			}
		}	
	});
 
	// Durant le transfert du fichier je désactive le bouton d'envoi du formulaire. Habituellement cette opération est faite automatiquement par la classe javascript mais ici le bouton submit n'est pas à l'intérieur du formulaire d'envoi des fichiers.
	bouton_submit.prop('disabled',true).css('opacity',0.6);
 
	// J'affiche l'information "messages.traitementFichier" dans le bloc "info_result"
	info_result.html(messages.traitementFichier).slideDown(200);;
}
 
 
/*
Utilisation de la fonction évènementielle "func_FormEnd" qui est déclenchée en fin de traitement. 
- Supprime les input crop du formulaire. 
*/
Up.config.func_FormEnd = function(tableau,info_serveur,mixte_serveur)
{
	//console.log(tableau);
 
	// supprime les input crop du formulaire 
	form_C.find(class_content_input_C).empty();
 
	/* 
	- Vérifie que tous les fichiers sélectionnés on été correctement uploadés. Dans les autres cas, un problème est survenu ou le fichier a été arrêté volontairement, et on laissera la possibilité au visiteur de soumettre un autre fichier.
	Cf mode d'emploi pour connaître le détail du contenu du tableau 
	- "ok_done" est un fichier ok 
	*/
	var cpt = 0;
	$.each(tableau,function(i,v)
	{ 	
		if(v.result == "ok_done")
		{
			cpt++;
		}
	})
 
	// Si aucun fichier joint et soumis au formulaire n'a eu d'erreur on affiche l'information "traitement terminé" 
	if(tableau.length == cpt)
	{
		// Le message "traitementTermine" contient un lien de redirection manuelle (actuellement  vers "index.html"). Modifiez la valeur de ce lien dans le fichier "Php_Upload/Classes/Messages.php" (tableau de la fonction "inscriptionClient")
		info_result.html(messages.traitementTermine).slideDown(200);;
 
		// On désactive le bouton d'envoi puisque l'inscription et l'éventuel téléchargement est réussi
		bouton_submit.prop('disabled',true).css({cursor:'default',opacity:0.6});
 
		// *Redirection : Habituellement on fait une redirection vers une autre page, immédiatement ou après un setTimeOut.
		// setTimeout (function(){window.location.replace('index.html')}, 8000);
	}
	else
	{ 	
		// Une erreur a eu lieu durant le téléchargement du fichier
		info_result.html(messages.telechargementEchec).slideDown(200);
 
		// On réactive le bouton submit pour que le visiteur puisse re soumettre un autre fichier.
		bouton_submit.prop('disabled',false).css('opacity',1);
	}
}
 
 
// Lancement de la fonction d'upload
Up.Start();
});
</script>  
 
</body>
</html>

UploadAjaxABCI_Inscription.php:

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
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
78
79
80
81
82
83
84
85
86
<?php
header('Content-type: text/html; charset=UTF-8');
session_start();
 
// AJAX
// -------------------------------------------------
if(
isset($_POST['typologie_aj']) &&
isset($_POST['titre_aj']) &&
isset($_POST['descriptif_aj'])&&
isset($_POST['nom_aj'])
)
{
	// ---------------------
	// RECUPERATION des DONNEES
	$typologie_aj			= (isset($_POST['typologie_aj']))?			trim($_POST['typologie_aj']) : '';
	$titre_aj				= (isset($_POST['titre_aj']))?				trim($_POST['titre_aj']) : '';
	$descriptif_aj			= (isset($_POST['descriptif_aj']))?			trim($_POST['descriptif_aj']) : '';
	$nom_aj					= (isset($_POST['nom_aj']))?				trim($_POST['nom_aj']) : '';
 
	$validForm_aj			= true;
	$MsgErreur_aj			= '';
 
	// ---------------------
	// Conversion du nom
	include ('16-str-replace.php');
	$nom_aj=str_replace($cible,$rempl,$nom_aj);
 
	// ---------------------	
	// CHAMPS OBLIGATOIRES
	$champ_obligatoire_aj = array();
	if ($typologie_aj=='')																		{$validForm_fp = false; $champ_obligatoire_fp[] = 'Typologie'; }
	if ($titre_aj==''			|| strlen($titre_aj)<2			|| strlen($titre_aj)>100)		{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Titre de la réalisation'; }		
	if ($descriptif_aj==''		|| strlen($descriptif_aj)<2		|| strlen($descriptif_aj)>300)	{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Descriptif'; }
	if ($nom_aj==''				|| strlen($nom_aj)<2			|| strlen($nom_aj)>50)			{$validForm_aj = false;	$champ_obligatoire_aj[] = 'Nom'; }
 
	if (count($champ_obligatoire_aj)>0)
	{
	$MsgErreur_fp7= 'Champs obligatoires';
	// "\\n" pour aller a la ligne: "\n" n'est pas pris en compte dans la chaine de caractères car l'antislash en php permet d'afficher des caractères spéciaux dans une chaîne de caractères
	echo $MsgErreur_fp7;
	}
 
	// -----------------------
	// OK SI PAS D'ERREUR
	if($validForm_aj === true)
	{
		// ---------------------
		if
		(
		$typologie_aj			!='' && 
		$titre_aj				!='' && 
		$descriptif_aj			!='' && 
		$nom_aj					!=''
		)
		{
		// ECRITURE dans la table
		include('./connexion-a2bis.php');
		//Preparer la requete
		$sql1 = 'INSERT INTO ad_realisations (typologie, titre, descriptif, nom) VALUES (?,?,?,?)';
		$requete1 = $connexion_bdd ->prepare($sql1);
		//Associer des valeurs aux place holders
		$requete1->bindValue(1, $typologie_aj, PDO::PARAM_STR);
		$requete1->bindValue(2, $titre_aj, PDO::PARAM_STR);
		$requete1->bindValue(3, $descriptif_aj, PDO::PARAM_STR);
		$requete1->bindValue(4, $nom_aj, PDO::PARAM_STR);			
 
		//Compiler et executer la requete
		$requete1->execute();
 
		//Clore la requete preparee
		$requete1->closeCursor();
		$requete1 = NULL;
 
		$MsgErreur_fp7='Réalisation enregistrée!!';
		echo $MsgErreur_fp7;
 
		// ---------------------
		// On vide
		$typologie_aj				='';
		$titre_aj					='';
		$paragraphe_aj				='';
		$nom_aj						='';
		}
	}
}

Salut,

Dans un premier temps il faut te concentrer sur ton formulaire d'inscription. Il s'agit d'envoyer une requête ajax qui récupère ce formulaire et l'envoie vers "destination_ajax_inscription".

Avec jquery tu peux utiliser serialize qui simplifie les choses. Enfin tu fais comme tu veux mais il faut faire cette requête ajax et qu'elle te retourne une information qui confirme que tout est ok. Quand tout est ok, depuis cette réponse ajax il te suffira de faire form_C.submit(); (si on reprend l'exemple précédent) pour déclencher l'envoi du formulaire d'upload.

Si tu ne sais pas faire des requêtes ajax, fais des tests dans des fichiers séparés en dehors de tout ton code pour maitriser au minimum les requêtes ajax. Et côté php (fichier de destination de la requête ajax) il me semble avoir répété au moins deux milles fois que pour récupérer les variables issues d'une requête ajax il faut utiliser urldecode.

Enfin bon c'est sûr que ce n'est pas l'exemple le plus simple même si sur le principe c'est assez facile. Il faut impérativement séparer les problèmes si tu veux t'en sortir. Un exemple plus simple que j'ai repris à partir de l'exemple d'upload basique :

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php
/*
Utilise le fichier "Php_Upload/UploadAjaxABCI_Php_Load_Basique.php" comme destination Ajax d'upload de fichier
*/
session_start();
header('Content-type: text/html; charset=UTF-8');
 
 
function Return_Octets($val)
{
	$val = str_replace([',',' '],['.',''],$val);
	$val = rtrim($val, "oO");
 
	$last = strtolower(substr($val,-1));
 
	switch($last)
	{
		case 't':  $val *= 1024;
		case 'g':  $val *= 1024;
		case 'm': $val *= 1024;
		case 'k':  $val *= 1024;
	}
	return $val;
}
 
$UpAbci_fragmentSize = Return_Octets('8M'); 
 
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = Return_Octets(min(ini_get('upload_max_filesize'),ini_get('post_max_size')));
$UpAbci_fragmentSize = !empty($UpAbci_fragmentSize) && $upload_max_filesize > $UpAbci_fragmentSize ? $UpAbci_fragmentSize : $upload_max_filesize;
 
 
$UpAbci_uniqidForm = hash("sha256",uniqid(rand(), true));
 
// Jeton de formulaire (token);
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>UploadAjaxABCI : upload de fichiers par fragmentation avec Html5 et Ajax/Jquery/Php</title>
<style type="text/css">
progress { 
	width:100px;
}
</style>
</head>
<body style="font-family:Arial, Helvetica, sans-serif; font-size:0.8em;width:800px;margin:3em auto 0 auto;line-height:1.5em">
 
<div>
<form id="form_base" action="#" method="post">
 
     <input type="file" name="upload_simple" multiple="multiple"  />
     <input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
     <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
 
     <!-- Bloc conteneur du retour d'informations -->
     <div id="reponse_upload">
        <!--information du fichier que l'on affiche uniquement si un fichier est soumis avec le style événementiel "data-upabcicss-select-file", pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier-->
         <div class="UpAbci_infosFile" style="display:none;margin-top:1em;" data-upabcicss-select-file="display:block;">
          <span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.8em;" data-upabcicss-result="display:none">stop</span>
            - <span class="UpAbci_name"></span><!-- nom du fichier -->
            <progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
            <span  class="UpAbci_status" style="font-weight:bold" data-upabcicss-result-ok="color:green;">en attente</span><!-- status (important sinon pas de retour d'information) -->
 
         </div>
    </div>
 
</form>
 
<br>
 
<form class="form_inscription" action="#" method="post">
 
        <label for="id_a">Typologie du client</label>
        <select name="typologie_fp7"  id="id_a">
            <option value="" disabled selected>Typologie</option>	<!-- placeholder sur select -->
            <option value="pariculier">Un particulier</option>
            <option value="collectivite">Institutionnels: collectivité, administration ou association</option>
            <option value="entreprise">Une entreprise</option>
        </select>
<br>
 
        <label for="id_b">Titre de la réalisation (max 100 caractères)</label>
        <input type="text" name="titre_fp7"  id="id_b" placeholder="Titre de la réalisation (max 100 caractères)" maxlength="100" value="" /><br>
 
 
        <label for="id_c">Descriptif de la réalisation (max 300 caractères)</label>
        <textarea name="paragraphe_fp7"  id="id_c" rows="3"  placeholder="Descriptif de la réalisation (max 300 caractères)" maxlength="300"></textarea>
<br>
 
        <label for="id_d">Nom de l'image (max 50 caractères)</label>
        <input type="text" name="nom_fp7"  id="id_d" placeholder="Nom de l'image (max 50 caractères)" maxlength="50" value="" />
<br>
		<input type="submit" value= "Envoyer">
    <input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
</form>
 
</div>
 
 
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
 
<script>
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode.
 
var destination_inscription = "test_inscription.php";
$(".form_inscription").on("submit",function(e)
{
	e.preventDefault();
	var jqxhr = $.post(destination_inscription, $(this).serialize(), function(result) {
	  alert(result);
	  // A la suite du alert (qui est là juste pour test) le formulaire d'upload de fichier sera envoyé
	  $("#form_base").submit();
	})
	  .fail(function() {
		alert( "error" );
	});
 
})
 
 
 
 
// Destination de la requête ajax d'upload
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Php_Load_Basique.php'; 
 
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
var up = new UploadAjaxABCI('#form_base',destination_ajax,'#reponse_upload');
 
// configuration optionnelle. Voir le fichier "UploadAjaxABCI.php" pour plus d'infos.
 
// Démarrage de la fonction, DOM chargé
$(function(){up.Start()});
</script>
 
</body>
</html>

et le fichier php "test_inscription.php" que j'ai placé au même niveau que le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
session_start();
$UpAbci_uniqidForm = isset($_POST['UpAbci_uniqidForm']) ? urldecode($_POST['UpAbci_uniqidForm']) : null;
 
if(isset($_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token']))
{
	$typologie_fp7 = isset($_POST['typologie_fp7']) ? urldecode($_POST['typologie_fp7']) : null;
	$titre_fp7 = isset($_POST['titre_fp7']) ? urldecode($_POST['titre_fp7']) : null;
	$paragraphe_fp7 = isset($_POST['paragraphe_fp7']) ? urldecode($_POST['paragraphe_fp7']) : null;
	$nom_fp7 = isset($_POST['nom_fp7']) ? urldecode($_POST['nom_fp7']) : null;
 
 
	// Normalement ici tu enregistre tes données en bdd et tu renvoies une valeur par exemple echo 'toto'; que tu pourras récupérer dans le résultat de ta requête ajax pour envoyer un message ou continuer le traitement suivant les cas.
 
	//Pour l'exmeple ici je renvoies toutes les valeurs entrées dans le formulaire d'inscription (pour renvoyer un tableau il faut utiliser json_encode)
 
	echo (json_encode(array($typologie_fp7,$titre_fp7,$paragraphe_fp7,$nom_fp7)));
}
else
{
	echo 'jeton de formulaire non valide';
}
?>

31/05/2016, 17h28
ABCIWEB

Re bonjour,

J'avais toujours l'exemple que j'ai donné ci-dessus ouvert dans un onglet de mon éditeur et en le refermant j'ai regardé un peu plus longtemps le nom des champs de ton formulaire... Apparemment ce ne sont pas des champs qui doivent être vérifiés par le serveur avant d'uploader le fichier ? Oui ou non ?

Parce que j'ai bien expliqué plus haut que faire deux formulaires est plus optimisé uniquement si tu dois faire des contrôles côté serveur car cela évite d'avoir à re sélectionner le fichier si une correction demandée par le serveur devait être faite. D'où l'intérêt de faire une première requête sur les champs textes qui déclenchera celle de l'upload si tout est ok.

Par contre si ce n'est pas le cas - comme semble le suggérer le nom de tes champs - tu n'as pas beaucoup d'avantages (et d'autant moins que ce n'est pas un upload multiple) à faire deux requêtes plutôt qu'une et il te suffirais simplement d'ajouter tes champs textes dans le formulaire d'upload pour les récupérer dans le script d'upload.

Tous les champs que tu ajoutes dans le formulaire d'upload sont automatiquement transmis et y'a aucune manipulation à faire ni code supplémentaire à écrire côté formulaire.
L'explication est que j'utilise (dans le code de la classe javascript) la méthode serializeArray() qui est la grande soeur de la méthode serialize() que tu m'as vu utiliser dans l'exemple précédent pour récupérer tous les champs de ton formulaire d'inscription. La différence entre les deux est que serializeArray() permet de récupérer des champs avec la notation tableau mais par contre elle est un peu moins simple à utiliser donc on choisi plutôt serialize() quand c'est suffisant (si le formulaire ne contient pas de champs avec la notation tableau).