Ajouter des données aux fichiers uploadés

**Ashina** · 05/10/2012, 10h06

Bonjour tout le monde,

Je viens vers vous pour quelques conseils.
J'ai utilisé le tutoriel ci-dessous pour construire ma page d'upload, servant à uploader des images vers une galerie photo.
Tutoriel Upload multiple

Ce que je voudrais faire, c'est ajouter un titre (description courte) à chaque image et pouvoir ensuite traiter les données pour compléter une base de données dans laquelle seront enregistrés le titre, le nom, le format et l'emplacement de chaque image.

Seulement, je ne vois pas trop comment m'y prendre pour faire cela au plus simple.

Quels conseils / idées auriez-vous pour réaliser cela

Merci d'avance, et bien bonne journée !

**Damien51** · 05/10/2012, 11h57

Dans le form, tu ajoutes juste une balise input text comme ceci :

Code :

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

<input type="text" name="description" id="description" />

J'ai lu à moitié, ensuite dans le traitement de l'upload, tu fais un petit insert into dans ta base mysql.

Code :

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

INSERT INTO photos VALUES('','description de limage','nom de limage','emplacement');

**Ashina** · 08/10/2012, 11h23

Salut,

Merci pour ta réponse et pour l'anticipation de ma question concernant le traitement et la récupération. A vrai dire, je débute totalement en javascript et je ne comprenais pas exactement où pouvait bien se faire la récupération des données. Je croyais que c'était le script gérant le multiupload qui faisait cela.

Et c'est ce bête détail qui me bloquait...

Voilà !

**Damien51** · 08/10/2012, 13h02

C'est plutot du PHP qui gère la partie upload, insert dans la base de données.

**Ashina** · 11/10/2012, 17h51

Je reviens pour cette question...
J'ai donc ajouté le champ de formulaire et pour le moment, la page d'upload se contente d'afficher les données envoyées. Je ne ferai l'insertion mysql que lorsque tout fonctionnera correctement.

Le problème, c'est que comme le script MultiUpload.js ajoute les images au fur et à mesure qu'on les sélectionne sans renouveler le formulaire complet, je n'ai pas la possibilité de donner une légende pour chaque photo. Résultat: si j'ai bien plusieurs images uploadées, j'ai la même légende pour chaque photo.

Ne connaissant pas bien le JS, je ne vois pas trop comment ajouter une nouvelle fonction pour renouveler le formulaire complet à chaque image, légende comprise. Est-ce possible ? Si oui, quelles fonctions peuvent m'aider (je ne demande pas forcément un code tout fait) ?

Merci d'avance

**Damien51** · 11/10/2012, 18h11

Une des solutions, c'est d'ajouter dans en js, un popup (prompt) en te demandant le legende de la photo en question.

Et ensuite d'ajouter dans la base de données

**Ashina** · 12/10/2012, 17h10

Si je suis bien, je pourrais même ajouter la fonction ci-dessous dans le script Multiupload.js ? Ou serait-ce trop compliqué ensuite pour la récupération des données ? Je compte faire celle-ci dans la page upload.php, de même que pour les images.

Code :

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

1
2
3
4
5
6
7
8
 
//Formulaire pour ajouter une légende
function PromptLegende() {
       var saisie = prompt("Ajouter une légende :", "légende")
       if (saisie!=null) {
           document.forms["mon_formulaire"].elements["description"].value=saisie;
       }
   }

Multiupload.js:

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
98
99
100
101
102
103
104
 
var nbrFichiers = 0;
 
function init()
{
    //Création d'un premier input
    creerInput();
}
 
//Fonction renvoyant le nom d'un fichier à partir de son chemin complet
function getFileName(fileName)
{
  if (fileName != "") {
    if (fileName.match(/^(\\\\|.:)/)) {
      var temp = new Array();
      temp = fileName.split("\\");
      var len = temp.length;
      fileName = temp[len-1];
    } else {
      temp = fileName.split("/");
      var len = temp.length;
      if(len>0)
        fileName = temp[len-1];
    }
  }  
  return fileName;
}
 
function creerInput()
{
    //Création de l'élément input
    var input = document.createElement("input");
    input.type = "file";
 
    //Lorsqu'un fichier est choisi, on ajoute son nom à la liste
    input.onchange = function() { 
        ajouterFichier(this);
    }
 
    //Ajout de l'input au document
    $("input").appendChild(input);
}
 
function ajouterFichier(input)
{
    if(nbrFichiers == 0)
        $("fichiers").removeChild($("fichiers").firstChild);
 
    //Création de la ligne dans la liste des fichiers à uploader
    var fichier = document.createElement("p");
 
    //Image de suppression
    var image = document.createElement("img");
    image.src = "images/suppr.gif";
    image.alt = "supprimer";
    Element.setStyle(image, {border: "0px", verticalAlign: "top"});
 
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
        supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
 
    //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
 
    //Ajout du nom du fichier
    fichier.appendChild(document.createTextNode(" " + getFileName(input.value)));
    Element.setStyle(fichier, {margin: "0", padding: "0"});
 
    //Ajout de l'item à la liste
    $("fichiers").appendChild(fichier);
    nbrFichiers++;
 
    //Affectation de l'attribut name de l'input
    input.name = getFileName(input.value);
 
    new Effect.Highlight(fichier, {startcolor: "#7fd9ff", endcolor: "#FFFFFF"});
 
    //Création d'un nouvel input pour un nouveau fichier
    Element.hide(input);
    creerInput();
}
 
function supprimerFichier(item, input)
{
    //Suppression de l'item dans la liste des fichiers à uploader
    new Effect.Fade(item, {afterFinish: function () { finSuppr(item); } });                
 
    //Suppression de l'input pour que le fichier supprimé ne soit pas envoyé par le formulaire
    $("input").removeChild(input);
}
 
function finSuppr(item)
{
    $("fichiers").removeChild(item); 
 
    nbrFichiers--;
    if(nbrFichiers == 0)
        $("fichiers").appendChild(document.createTextNode("Aucun fichier à uploader"));
}

Suivant le code ci-dessus, cela doit être plus que possible d'ajouter une nouvelle fonction (mon prompt) et d'insérer un appel à cette dernière dans la fonction ajouterFichier pour que photos et légende correspondante s'affichent de base dans le formulaire d'upload ? Ou me trompé-je ?

**Damien51** · 12/10/2012, 17h50

C'est possible. Il faut tester et voir si il peut avoir des complications, mais tu es dans la bonne voie.

**Ashina** · 24/10/2012, 15h57

Re,

J'ai testé plusieurs variantes, mais j'arrive toujours au même problème. Le script me donne le prompt pour choisir l'image, puis celui pour insérer sa légende... et s'arrête sans aller plus loin. C'est sûrement tout bête comme erreur, mais là j'avoue que je sèche. Je crains que mes débuts en javascript ne soient quelque peu laborieux.

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
var nbrFichiers = 0;
 
function init()
{
    //Création d'un premier input
    creerInput();
}
 
//Fonction renvoyant le nom d'un fichier à partir de son chemin complet
function getFileName(fileName)
{
  if (fileName != "") {
    if (fileName.match(/^(\\\\|.:)/)) {
      var temp = new Array();
      temp = fileName.split("\\");
      var len = temp.length;
      fileName = temp[len-1];
    } else {
      temp = fileName.split("/");
      var len = temp.length;
      if(len>0)
        fileName = temp[len-1];
    }
  }  
  return fileName;
}
 
function creerInput()
{
    //Création de l'élément input
    var input = document.createElement("input");
    input.type = "file";
 
    //Lorsqu'un fichier est choisi, on ajoute son nom à la liste
    input.onchange = function() { 
        ajouterFichier(this);
    }
	//On demande à ajouter une légende
    input.onchange = function() { 
        promptLegende(this);
    }
 
    //Ajout de l'input au document
    $("input").appendChild(input);
}
 
//Formulaire pour ajouter une légende
function promptLegende() {
   var saisie = prompt("Ajouter une légende :", "légende")
   if (saisie!=null) {
	   document.forms["mon_formulaire"].elements["description"].value=saisie;
   }
}
 
function ajouterFichier(input)
{
    if(nbrFichiers == 0)
        $("fichiers").removeChild($("fichiers").firstChild);
 
    //Création de la ligne dans la liste des fichiers à uploader
    var fichier = document.createElement("p");
 
    //Image de suppression
    var image = document.createElement("img");
    image.src = "images/suppr.gif";
    image.alt = "supprimer";
    Element.setStyle(image, {border: "0px", verticalAlign: "top"});
 
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
        supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
 
    //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
 
    //Ajout du nom du fichier
    fichier.appendChild(document.createTextNode(" " + getFileName(input.value)));
    Element.setStyle(fichier, {margin: "0", padding: "0"});
 
    //Ajout de l'item à la liste
    $("fichiers").appendChild(fichier);
    nbrFichiers++;
 
    //Affectation de l'attribut name de l'input
    input.name = getFileName(input.value);
 
    new Effect.Highlight(fichier, {startcolor: "#7fd9ff", endcolor: "#FFFFFF"});
 
    //Création d'un nouvel input pour un nouveau fichier
    Element.hide(input);
    creerInput();
}
 
function supprimerFichier(item, input)
{
    //Suppression de l'item dans la liste des fichiers à uploader
    new Effect.Fade(item, {afterFinish: function () { finSuppr(item); } });                
 
    //Suppression de l'input pour que le fichier supprimé ne soit pas envoyé par le formulaire
    $("input").removeChild(input);
}
 
function finSuppr(item)
{
    $("fichiers").removeChild(item); 
 
    nbrFichiers--;
    if(nbrFichiers == 0)
        $("fichiers").appendChild(document.createTextNode("Aucun fichier à uploader"));
}

**Ashina** · 30/10/2012, 17h58

J'ai testé la variante suivante, où j'essaie d'ajouter la légende en cliquant sur un bouton comme pour la suppression.. Cependant, je me pose deux questions:
Est-ce que les identifiants des objets ne vont pas être les mêmes ? Si non, quel est l'identifiant de la légende ? Est-ce que ce sera "description" ?

Voilà les codes des pages:

Multiupload.js (les modifications sont dans la fonction ajouterFichier)

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
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
 
var nbrFichiers = 0;
 
function init()
{
    //Création d'un premier input
    creerInput();
}
 
//Fonction renvoyant le nom d'un fichier à partir de son chemin complet
function getFileName(fileName)
{
  if (fileName != "") {
    if (fileName.match(/^(\\\\|.:)/)) {
      var temp = new Array();
      temp = fileName.split("\\");
      var len = temp.length;
      fileName = temp[len-1];
    } else {
      temp = fileName.split("/");
      var len = temp.length;
      if(len>0)
        fileName = temp[len-1];
    }
  }  
  return fileName;
}
 
function creerInput()
{
    //Création de l'élément input
    var input = document.createElement("input");
    input.type = "file";
 
    //Lorsqu'un fichier est choisi, on ajoute son nom à la liste
    input.onchange = function() { 
        ajouterFichier(this);
    }
 
    //Ajout de l'input au document
    $("input").appendChild(input);
}
 
function ajouterFichier(input)
{
    if(nbrFichiers == 0)
        $("fichiers").removeChild($("fichiers").firstChild);
 
    //Création de la ligne dans la liste des fichiers à uploader
    var fichier = document.createElement("p");
 
    //Image de suppression et ajout de légende
    var image = document.createElement("img");
    image.src = "images/suppr.gif";
    image.alt = "supprimer";
    Element.setStyle(image, {border: "0px", verticalAlign: "top"});
 
	var image2 = document.createElement("img");
    image2.src = "images/text.gif";
    image2.alt = "description";
    Element.setStyle(image2, {border: "0px", verticalAlign: "top"});
 
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
        supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
	 //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
 
	//Lien pour ajouter la légende
	var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
        promptLegende();
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image2);
    //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
 
    //Ajout du nom du fichier
    fichier.appendChild(document.createTextNode(" " + getFileName(input.value)));
    Element.setStyle(fichier, {margin: "0", padding: "0"});
 
    //Ajout de l'item à la liste
    $("fichiers").appendChild(fichier);
    nbrFichiers++;
 
    //Affectation de l'attribut name de l'input
    input.name = getFileName(input.value);
 
    new Effect.Highlight(fichier, {startcolor: "#7fd9ff", endcolor: "#FFFFFF"});
 
    //Création d'un nouvel input pour un nouveau fichier
    Element.hide(input);
    creerInput();
}
 
//Formulaire pour ajouter une légende
function promptLegende() {
	var saisie = prompt("Ajouter une légende :", "légende")
	if (saisie!=null) {
		document.forms["mon_formulaire"].elements["description"].value=saisie;
	}
}
 
function supprimerFichier(item, input)
{
    //Suppression de l'item dans la liste des fichiers à uploader
    new Effect.Fade(item, {afterFinish: function () { finSuppr(item); } });                
 
    //Suppression de l'input pour que le fichier supprimé ne soit pas envoyé par le formulaire
    $("input").removeChild(input);
}
 
function finSuppr(item)
{
    $("fichiers").removeChild(item); 
 
    nbrFichiers--;
    if(nbrFichiers == 0)
        $("fichiers").appendChild(document.createTextNode("Aucun fichier à uploader"));
}

upload.php:

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
 
<?php
 
	include('header.php');
 
	// VARIABLES
	$page = '';
	$folderpath = '../files/';
 
	if(!isset($_SESSION['id_user'])){
		header("Location: login.php");
	}
 
	if(isset($_POST) && count($_POST) > 0){	
		$galleryname = $_POST['gallery'];
		$path = $folderpath.$galleryname;
 
		// Affichage des fichiers uploadés
		$page .= '<h3>Upload de la galerie</h3>';
 
		// Récupération des noms de fichiers
		foreach($_FILES as $fichier) {
			$filename = ($fichier['name']);
			$legende = ($fichier['desc']);
 
			$page .= $path.' -- '.$filename.' -- '.$legende.'<br />';
		}
	} else {
		// Message d'erreur et renvoi à la page d'upload
		$page .= 'Erreur lors de la soumission du formulaire. <br />';
		$page .= '<a href="add_gallery.php">Retour</a>';
	}
 
	include("body.php");
?>

Merci d'avance pour toute aide.

P.S. J'éditerai / supprimerai le message précédent.
P.P.S. Je n'ai pas le lien pour éditer le message précédent...

**Damien51** · 05/11/2012, 12h59

Si je me souviens bien, quand tu vas l'enregistrer dans la base, tu vas enregistrer, le nom de l'image et sur la même la description. Donc il n'y aura en principe pas de problème.

**Ashina** · 05/11/2012, 14h23

OK. Bon...
Etant donné que je rencontre toujours un problème pour pouvoir insérer la description après avoir choisi le fichier et avant l'upload, je m'y suis prise (temporairement) autrement:

1. Sélection des fichiers et upload avec le script trouvé ici-même
2. Sur la page upload.php qui devait à l'origine envoyer les données sur la base de données, j'ai d'abord fait générer (en PHP) un formulaire qui affiche chaque image avec un champ pour y ajouter la description. Le nom du champ prend la valeur "descX" ou X correspond à l'index de l'image dans le tableau $_FILES, puis ajout du tout dans la base de données.

Pas très propre, je le reconnais. Mais au moins, cela fonctionne et me donne le temps d'étudier le javascript à part avant de reprendre tout ça.

Ajouter des données aux fichiers uploadés

Langage PHP

Discussions similaires

Partager

Partager