Upload de fichier avec ajax

**Latimer** · 17/06/2015, 12h10

Bonjour à tous!!!

Voila j'ai un tableau qui se rempli au fur et à mesure et dans chaque ligne j'ai mis un input file. Le but de ma manoeuvre est que pour chaque ligne qui contient un lot, que l'on puisse ulpoader des fichiers pour le lot situé sur la même ligne et tout ça sans que l'on change de page. J'ai utilisé pour cela un formdata en javascript qui l'envoie en ajax dans une page php qui va mettre les fichiers en BDD. Mais le soucis c'est que j'ai rien dans ma BDD et je n'arrives pas à trouver l'erreur.

voici mon tableau:

Code :

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
<table class="table" >
						<tr class="couleur5">
							<th class="th" rowspan="3" style="min-width:100px;">N° lot</th>
							<th class="th" rowspan="3" style="min-width:100px;">Qte</th>
							<th class="th" rowspan="3" style="min-width:100px;">Fichier</th>
							<th class="th" rowspan="3" style="min-width:100px;">Date de reception</th>
							<th class="th" colspan="3" >Conformité</th>
						</tr>
						<tr >
							<th class="th" style="background-color:#E8BEBE;width:50px;">NOK</th>
							<th class="th" style="background-color:#EEEEBE;width:50px;">DRG</th>
							<th class="th" style="background-color:#BEE8BE;width:50px;">OK </th>
						</tr>
						<tr class="couleur5">
 
 
								<th class="th" style="background-color:#E8BEBE;width:50px;">
									<input id="piece_nok" name='piece_livre[]' style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio"/>
								</th>
								<th class="th" style="background-color:#EEEEBE;width:50px;">
									<input id="piece_drg" name='piece_livre[]' style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio" />
								</th>
								<th class="th" style="background-color:#BEE8BE;width:50px;">
									<input id="piece_ok" name='piece_livre[]' style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio"/>
								</th>
 
						</tr>
 
						<tr>
 
		<?php
                        $flag_couleur1 = 0;
                        while($result1 = @oci_fetch_assoc(@$statement1)) {
                        ?>
 
 
				<td class="td"><?php echo $result1['NUM_LOT_DEG']; ?></td> 
				<td class="td"><?php echo $result1['QUANTITE']; ?></td> 
				<td><input name="controle_qualite[]" type="file" id='champFile' multiple="multiple" onClick="AffID_QUA(<?php echo $result1['ID_VALIDATION_QUALITE'];?>);"  style="float:left;width:100%;"></td>
				<td class="td"><?php echo $result1['DATE_RECEPTION']; ?></td> 
				<td class="td" style="background-color:#E8BEBE;">
				<input id="piece_nok" name='piece_livre[]' onclick="val_qualite(<?php echo $result1['ID_VALIDATION_QUALITE'];?>,1);" style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio"/>
				</td> 
				<td class="td" style="background-color:#EEEEBE;">
				<input id="piece_drg" name='piece_livre[]' onclick="val_qualite(<?php echo $result1['ID_VALIDATION_QUALITE'];?>,2);" style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio" />
				</td>
				<td class="td" style="background-color:#BEE8BE;">
				<input id="piece_ok" name='piece_livre[]' onclick="val_qualite(<?php echo $result1['ID_VALIDATION_QUALITE'];?>,3);" style="margin-top:6px;margin-left:4px;height:15px;width:15px;" type="radio"/>
				</td> 
				<tr>
 
 
 
 
 
		<?php $flag_couleur1++;
                        } ?>
						</tr>
 
 
					</table>

Mon code javascript:

Code :

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
			var id;
function AffID_QUA(id_val_qua) 
{  
	id=id_val_qua;
 
 
}
 
$(function() {
   $('#champFile').change(function() {
 
    var formdata = new FormData();
	var fichier = document.getElementById('#champFile').files[0];
 
	formdata.append("fichier", fichier);
	formdata.append("id_val_qua", id);
 
  var ajax = new XMLHttpRequest();
 
    ajax.open("POST", "maj_fichier_qualite.php");
    ajax.send(formdata);
 
   });
  });

Et enfin script php d'envoi dans ma BDD:

Code :

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
foreach($_FILES['fichier']['tmp_name'] as $i => $fichier_nom) {
		if(!empty($fichier_nom)){
			$type = $_FILES['fichier']['type'][$i];
			$name = $_FILES['fichier']['name'][$i];
			$lob = oci_new_descriptor($conn, OCI_D_LOB);
			$stmt = oci_parse($conn, "insert into POP_FICHIER_QUALITE_EN_COURS (ID_VALIDATION_QUALITE,TYPE_FIHCIER_QUALITE_EN_COURS,LABEL_FICHIER_QUALITE_EN_COURS,FICHIER_QUALITE_EN_COURS)
					   values(".$_POST['id_val_qua'].",'".$type."','".$name."', EMPTY_BLOB()) returning FICHIER_QUALITE_EN_COURS into :FICHIER_QUALITE_EN_COURS");
			oci_bind_by_name($stmt, ':FICHIER_QUALITE_EN_COURS', $lob, -1, OCI_B_BLOB);
			oci_execute($stmt, OCI_DEFAULT);
 
			if($lob->savefile($fichier_nom)){
				oci_commit($conn);
			}
			$lob->free();
			oci_free_statement($stmt);
		}
	}

Voila si quelqu'un pouvais m'aider ça serai super car la je bloque

.

**SpaceFrog** · 17/06/2015, 12h53

Jette un oeil par là
http://abandon.ie/notebook/simple-fi...ng-jquery-ajax

**Watilin** · 17/06/2015, 14h28

Un id dans un while…

Code PHP :

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

1
2
3
4
<?php while (...) {
  ?>
  <input id="champFile">
  ...

Edit : Pour être un peu moins laconique, je précise que le drame a lieu à ce moment précis :

Code :

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

var fichier = document.getElementById('#champFile').files[0];

Ce document.getElementById sélectionne le premier élément #champFile qu'il trouve dans la page (même masqué). Ce n'est certainement pas ce que tu veux.

**Watilin** · 17/06/2015, 16h56

Envoyé par Latimer

je n'arrives pas à trouver l'erreur.

Tu n'as pas assez de moyens de diagnostic. Il faut que tu en rajoutes :

– Dans ton code JavaScript, par exemple ici :

Code JS :

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

1
2
3
4
5
6
7
  $('#champFile').change(function() {
    var formdata = new FormData();
    var fichier = document.getElementById('#champFile').files[0];
    console.log(fichier);
 
    ...
  });

Tape sur F12 pour ouvrir la console de ton navigateur et va sur l'onglet console pour voir les messages que ton script affiche avec console.log. Va aussi sur l'onglet réseau (network) pour voir tes requêtes Ajax.

– Dans ton code PHP qui reçoit les requêtes Ajax, tu peux envoyer des informations avec echo. Même si ton code JavaScript ne prévoit pas de gérer la réponse, les informations seront visibles dans ta console (onglet réseau). Par exemple pour faire simple, tu peux envoyer une réponse au format texte et indiquer à chaque itération de ta boucle foreach quel fichier a été traité et si la requête a réussi.

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
header('Content-Type: text/plain; charset=utf-8');
 
foreach (...) {
  echo "$i: $fichier_nom\n";
 
  ...
 
  $success = oci_execute($stmt, OCI_DEFAULT);
  if ($success) {
    echo "=> success!\n";
  } else {
    echo "=> failure X(\n";
    $error = oci_error($conn);
    echo "     [{$error['code']}] {$error['message']}\n";
  }
  echo "\n";
}

Sinon dans ton code il y a un truc qui me dérange :

Code html :

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

<input ... id='champFile' ... onClick="AffID_QUA(<?php echo $result1['ID_VALIDATION_QUALITE']; ?>);">

Du PHP dans du JavaScript dans du HTML… Donne-moi tes doigts, que je tape dessus avec ma règle en fer !

À part ce mélange de code parfait pour devenir chauve en quinze jours à force d'arrachage de cheveux (et encore, tu as de la chance, là tu manipules des nombres donc tu n'as pas de problème de guillemets), je trouve que la logique du truc est maladroite :

tu surveilles les click sur l'input pour modifier une variable globale id
tu surveilles les change sur le même input et tu utilises cette variable id
les évènements click et change ont lieu en même temps (a priori)

Pour moi, l'un des deux évènements est inutile. Je supprimerais le onclick. Et je supprimerais cette variable globale, car il y a un moyen beaucoup plus fiable de récupérer l'information.

Il me semble que la valeur de $result1['ID_VALIDATION_QUALITE'] est la même pour tous les input du même <tr>. Pourquoi ne pas mettre l'information sur le <tr> ?

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$flag_couleur1 = 0;
while ($result1 = oci_fetch_assoc($statement1)) {
  echo "<tr data-id_validation_qualite='{$result1['ID_VALIDATION_QUALITE']}'>
    <td> {$result1['NUM_LOT_DEG']} </td>
    <td> {$result1['QUANTITE']}    </td>
    <td>
      <input name='controle_qualite[]' type='file' id='champFile' multiple='multiple' />
    </td>
    ...";
    $flag_couleur1++;
}

Tu noteras au passage comment je rends le code plus clair en supprimant les alternances code HTML / code PHP et en ne faisant qu'un seul echo.

L'attribut data-id_validation_qualite que j'ai rajouté sur le <tr> est automatiquement traduit en propriété dataset en JavaScript. Voir http://caniuse.com/#feat=dataset pour plus d'infos.

Code :

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

1
2
var tr = ... // sélection du <tr> (je vais parler de ça juste après)
var id = tr.dataset.id_validation_qualite;

Pour sélectionner le <tr> qui nous intéresse, il faut d'abord accéder à l'input qui a causé l'évènement change. C'est facile, il est passé comme contexte (l'objet this) à ta fonction :

Code :

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

1
2
3
4
$('#champFile').change(function() {
  var input = this;
  ...
});

Ensuite, pour accéder au <tr>, soit tu te reposes sur la connaissance de ta structure HTML (tu sais que l'input est dans un <td> qui est dans le <tr>), soit tu utilises jQuery pour plus de souplesse (ton script risque moins de ne plus marcher si tu changes la structure HTML).

Code :

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

1
2
3
4
5
6
7
$('#champFile').change(function() {
  // sans jQuery
  var tr = this.parentNode.parentNode;
 
  // avec jQuery
  var $tr = $(this).closest("tr");
});

Attention toutefois à la nature de ton objet suivant la méthode utilisée : sans jQuery, tu récupères l'objet DOM « nu » ; avec jQuery tu récupères un objet jQuery. Ici, j'ai préfixé mes variables d'un dollar pour indiquer un objet jQuery.
La façon de récupérer l'attribut data ne sera pas la même avec ou sans jQuery. Avec jQuery, au lieu de passer par dataset, tu utilises la méthode .data().

Code :

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

1
2
3
var id = tr.dataset.id_validation_qualite;
// ou
var id = $tr.data("id_validation_qualite");

Avec ça tu as l'id dont tu as besoin pour ta requête Ajax. Il ne te reste plus qu'à coller les bouts de code que je t'ai donnés

**Latimer** · 19/06/2015, 14h19

Je vous remercie tous pour vos message. J'ai finalement changé de stratégie. Maintenant je n'ai plus un tableau avec plein d'input d'upload de fichier, j'ai un tableau que je rempli mais avec des champ en dessous et dans ces champ j'ai un seul input de fichier. Donc ce qui corrige l'erreur des id des input et aussi de la variable global en javascript. Par contre pour le moment je continu avec le tableau constitué de html et de php. Je changerai après ne vous inquiéter pas

. voici le code de ce tableau.

Code :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<table class="table">
	<tr class="couleur5">
		<th class="th"  style="width:20%;">Numéro de lot</th>
		<th class="th"  style="width:20%;">Nom Personne reception</th>
		<th class="th" style="width:5%;">Date reception</th>
		<th class="th"style="min-width:140px; width:10%;" >N° BL</th>
		<th class="th"  style="width:15%;">Quantité reçue</th>
		<th class="th" style="width:10%;">Emplacement</th>
		<th class="th" style="background-color:#BEE8BE;width:50px;">OK </th>
		<th class="th" style="background-color:#EEEEBE;width:50px;">DRG</th>
		<th class="th" style="background-color:#E8BEBE;width:50px;">NOK</th>
		<th class="th" style="width:10%;">Commentaires</th>
		<th class="th"  style="width:15%;">Documents<br/>(BL, rapport de controle,...)</th>
		<th class="th"style="min-width:140px;" >Action</th>
	</tr>
	<tr>
 
		<?php
                        $flag_couleur1 = 0;
                        while($result1 = @oci_fetch_assoc(@$statement5)) {
                        
                                if($result1['NB_PIECE_OK'] == null){
                                $nb_piece_ok=0;
                                }
                                else {
                                $nb_piece_ok=$result1['NB_PIECE_OK'];
                                }
                                
                                if($result1['NB_PIECE_DRG'] == null){
                                $nb_piece_drg=0;
                                }
                                else {
                                $nb_piece_drg=$result1['NB_PIECE_DRG'];
                                }
                                
                                if($result1['NB_PIECE_NOK'] == null){
                                $nb_piece_nok=0;
                                }
                                else {
                                $nb_piece_nok=$result1['NB_PIECE_NOK'];
                                }
                        ?>
 
 
				<td class="td"><?php echo $result1['NUM_EN_COURS_DEG']; ?></td> 
 
				<td class="td"><?php echo $result1['NOM_PERSONNE']; ?></td> 
 
				<td class="td"><?php echo $result1['DATE_RECEPTION']; ?></td> 
 
				<td class="td"><?php echo $result1['NUM_BL']; ?></td> 
 
				<td class="td"><?php echo $result1['QUANTITE_RECU']; ?></td> 
 
				<td class="td"><?php echo $result1['NOM_EMPLACEMENT']; ?></td> 
 
				<td class="td" style="background-color:#BEE8BE;color:green;"><?php echo $nb_piece_ok ?></td> 
 
				<td class="td" style="background-color:#EEEEBE;color:orange;"><?php echo $nb_piece_drg ?></td> 
 
				<td class="td" style="background-color:#E8BEBE;color:red;"><?php echo $nb_piece_nok; ?></td> 
 
				<td class="td"><?php echo $result1['COMMENTAIRE']; ?></td> 
				<td class="td"><img onclick='Etiquette_lot(<?php echo $result1['ID_STOCK'];?>)'  style='cursor: pointer;margin:5px; width:30px;' src='../../icone/Barcode.ico' alt='Impr_Eti' title="Imprimer l'étiquette" />
				</td> 
				<tr>
 
 
 
 
 
		<?php $flag_couleur1++;
                        } ?>
		</tr>		
				<tr>
				<td class="td"></td>
				<td class="td"></td>
				<td class="td"><input id="date_rec" style="width:100%;" name="date_rec" type="date" value="<?php echo $date = date('Y-m-d'); ?>"  style="width:100%;"></td>
				<td class="td"><input id="num_bl" name="num_bl" type="text" style="width:100%;"></td>
				<td class="td"><input id="qte_recu" name="qte_recu" type="text" style="width:100%;"></td>
					<td class="td"><select id="emplacement" name="emplacement" style="width:100%;" class="select">
						<option value="">...</option>
						<?php while ($list_emplacement = oci_fetch_assoc($statement1)) { ?>
							<option value="<?php echo $list_emplacement['ID_EMPLACEMENT']; ?>"><?php echo $list_emplacement['NOM_EMPLACEMENT']; ?></option><?php
                                                } ?>
					</select></td>
					<td class="td"><input id="piece_ok" name="piece_ok" type="text" style="width:100%;background-color:#BEE8BE;"></td>
					<td class="td"><input id="piece_drg" name="piece_drg" type="text" style="width:100%;background-color:#EEEEBE;"></td>
					<td class="td"><input id="piece_nok" name="piece_nok" type="text" style="width:100%;background-color:#E8BEBE;"></td>
					<td class="td"><input id="commentaire_rec" name="commentaire_rec" type="text" style="width:100%;"></td>
					<td class="td"><input id="champFile" name="controle_qualite[]" type="file" multiple="multiple" style="float:left;width:100%;"></td>
				<td><input style="width:50%; margin:auto; display: block;" id="btn_ajout_lot" class="bouton_2 couleur16" type="button" value="Ajouter" onclick="Ajt_reception(date_rec.value,num_bl.value,num_lot.value,qte_recu.value,emplacement.value,commentaire_rec.value,a_valider_qualite.value,piece_ok.value,piece_drg.value,piece_nok.value);" /></td>
 
 
				</tr>
	</tr>
</table>

Sur le bouton "ajouter" je fais appel à une fonction javascript qui fait en sorte de rafraîchir mon tableau pour affichage. Et donc c'est par cette fonction que je souhaite récupérer les données de l'input de fichier pour l'upload dans ma base de donnée.

voici le code de ma fonction:

Code :

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
function Ajt_reception(date_reception,num_bl,num_en_cours,qte_recu,id_emplacement,commentaire_rec,a_valider_qualite,piece_ok,piece_drg,piece_nok)
{   requete = CreerRequete();
 
	var fichier = document.getElementById('champFile').files[0];
	//var fichier = document.getElementById('champFile');
	console.log(fichier);
	if (requete)
	{	
		commentaire = encodeURIComponent(commentaire);
		requete.open("GET", "formulaire/reception_lot/tableau_reception.php?action="+1+"&date_reception="+date_reception+"&num_bl="+num_bl+"&num_en_cours="+num_en_cours+"&qte_recu="+qte_recu+"&id_emplacement="+id_emplacement+"&commentaire_rec="+commentaire_rec+"&a_valider_qualite="+a_valider_qualite+"&piece_ok="+piece_ok+"&piece_drg="+piece_drg+"&piece_nok="+piece_nok+"&fichier="+fichier, false);
		requete.send(null);
        document.getElementById('div_table_rec').innerHTML = requete.responseText;
		// Renvoi le formulaire d'ajout mais vide
	}
 
 
}

La fonction fonctionne parfaitement et j'ai commencé à récupérer les données de l'input avec cette ligne:

Code :

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

var fichier = document.getElementById('champFile').files[0];

il m'affche ceci:

File {webkitRelativePath: "", lastModified: 1434619341000, lastModifiedDate: Thu Jun 18 2015 11:22:21 GMT+0200 (Paris, Madrid (heure d’été)), name: "alignement.PNG", type: "image/png"…}

Je vois qu'il récupère bien le fichier donc je l'ai envoyé dans ma page php dans laquel j'ai mis ceci:

Code :

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
$_FILES['fichier'] = $_GET['fichier'];
	echo $_FILES['fichier']; 
	$name = $_FILES['fichier']['name'];
	echo $name;
 
	/*foreach($_FILES['controle_qualite']['tmp_name'] as $i => $fichier_nom) {
		if(!empty($fichier_nom)){
			$type = $_FILES['controle_qualite']['type'][$i];
			$name = $_FILES['controle_qualite']['name'][$i];
			$lob = oci_new_descriptor($conn, OCI_D_LOB);
			$stmt = oci_parse($conn, "insert into POP_FICHIER_QUALITE_EN_COURS (ID_EN_COURS,TYPE_FIHCIER_QUALITE_EN_COURS,LABEL_FICHIER_QUALITE_EN_COURS,FICHIER_QUALITE_EN_COURS)
					   values(".$id_en_cours['ID_EN_COURS'].",'".$type."','".$name."', EMPTY_BLOB()) returning FICHIER_QUALITE_EN_COURS into :FICHIER_QUALITE_EN_COURS");
			oci_bind_by_name($stmt, ':FICHIER_QUALITE_EN_COURS', $lob, -1, OCI_B_BLOB);
			oci_execute($stmt, OCI_DEFAULT);
 
			if($lob->savefile($fichier_nom)){
				oci_commit($conn);
			}
			$lob->free();
			oci_free_statement($stmt);
		}
	}*/

cette ligne : echo $_FILES['fichier']; m'affcihe : [object File]

J'ai donc essayé d'obtenir le non et de l'afficher avec cette ligne: $name = $_FILES['fichier']['name'];

Mais j'obtient cette erreur:

Warning: Illegal string offset 'name'

J'ai beau chercher un moyen de la résoudre je trouve pas. Donc si vous avez un idée je suis preneur.

Upload de fichier avec ajax

jQuery

Discussions similaires

Partager

Partager