Discussion :

[Bloxas_]

Bonjour, tout d'abord je ne suis pas sur de l'emplacement de mon sujet car la question est plus en php/html mais mon code étant majoritairement en Javascript je pense que si l'on n'a aucune connaissance dans ce langage la compréhension n'en sera que plus difficile.

Voici mon problème : j'ai besoin d'upload un certain nombre d'images dans un dossier précis mais ceci à partir de plusieurs types='file' différent, et je ne sais même pas si c'est possible. Upload un fichier à la fois je sais le faire mais là j'ai un nombre d'images qui peut aller de 0 à 100 et je ne peux pas demander à mon utilisateur de remplir 100 formulaires à la suite. Je ne sais pas si je suis très clair je vais donc montrer mon code : ( pour information j'utilise le framework codeIgniter )


PHP :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form class="form-horizontal" role="form" method="post" name="formulaireAjout" accept-charset="utf-8" action=<?php echo base_url("assets/codeIndependant/creation.php");?>>
	<div class='form-group'>
		<div class='col-sm-10'>
	                 <select  class="form-control" id="matiereSelect" name="matiereSelect" onchange="matiere(this.value)">
				option>Choisir une mati&egravere</option>
				<option value="anglais">Anglais</option>
				<option value="culture">Culture g&eacuten&eacuterale</option>
				<option value="francais">Fran&ccedilais</option>
				<option value="raisonnement">Raisonnement et logique</option>					
			</select>
		</div>
	</div>
	<span id="annee[]"></span>
	<span id="nbQuestion[]"></span>
	<span id="question[]"></span>
	<span id="hiddenAnnee[]"></span>
	<span id="hiddenMatiere[]"></span>
</form>

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
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
function matiere(matiere){
	var now = new Date();
	var annee   = now.getFullYear();
	var choixAnnee = "<div class='form-group'><div class='col-sm-10'><select id='anneeSelect' name='anneeSelect' class='form-control' onchange='anneeChoix(this.value)'><option>S&eacutelectionner une ann&eacutee</option>";
 
	for(i=2010; i<=annee + 1; i++)
	{
		choixAnnee = choixAnnee + "<option value="+ i +">"+ i +"</option>";
	}
	choixAnnee = choixAnnee + "</select></div></div>";
	document.getElementById("matiereSelect").disabled=true;	
	afficheR = document.getElementById("annee[]");
	afficheR.innerHTML = choixAnnee;
	afficheR = document.getElementById("hiddenMatiere[]");
	afficheR.innerHTML = "<input id='matiere' name='matiere' type='hidden' value='"+ matiere +"'>";
 
}
function anneeChoix(annee)
{
	var nombreQuestion = "<div class='form-group'><div class='col-sm-10'><select id='questionEcriture' class='form-control' onchange='ecritureQuestion(this.value)'><option>Choisir le nombre de question</option><option value='20'>20</option><option value='50'>50</option></select></div></div>";
	document.getElementById("anneeSelect").disabled=true;	
	afficheR = document.getElementById("nbQuestion[]");
	afficheR.innerHTML = nombreQuestion;
	afficheR = document.getElementById("hiddenAnnee[]");
	afficheR.innerHTML = "<input id='annee' name='annee' type='hidden' value='"+ annee +"'>";
 
}
function ecritureQuestion(nbQuestion)
{
	var question ="";
	for(i=1; i<=nbQuestion; i++)
	{
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='question'>Type d'&eacutecriture question :</label><div class='col-sm-7'><select id='typeEcriture"+i+"' class='form-control' onchange='typeQuestion(this.value, "+i+")'><option>Choisir le type d'&eacutecriture</option><option value='texte'>Texte</option><option value='image'>Image</option></select></div></div>";
		question = question + '<span id="texte'+i+'[]"></span><span id="image'+i+'[]"></span>';
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='choix1"+ i +"'>Choix r&eacuteponse n&deg;1 : </label><div class='col-sm-7'><input class='form-control' type='text' id='choix1"+ i +"' name='choix1"+ i +"'></div><label classe='radio'><input type='radio' class='checkbox' id='choix1"+ i +"' name='check"+ i +"'></label></div>";
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='choix2"+ i +"'>Choix r&eacuteponse n&deg;2 : </label><div class='col-sm-7'><input class='form-control' type='text' id='choix2"+ i +"' name='choix2"+ i +"'></div><label classe='radio'><input type='radio' class='checkbox' id='choix2"+ i +"' name='check"+ i +"'></label></div>";
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='choix3"+ i +"'>Choix r&eacuteponse n&deg;3 : </label><div class='col-sm-7'><input class='form-control' type='text' id='choix3"+ i +"' name='choix3"+ i +"'></div><label classe='radio'><input type='radio' class='checkbox' id='choix3"+ i +"' name='check"+ i +"'></label></div>";
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='choix4"+ i +"'>Choix r&eacuteponse n&deg;4 : </label><div class='col-sm-7'><input class='form-control' type='text' id='choix4"+ i +"' name='choix4"+ i +"'></div><label classe='radio'><input type='radio' class='checkbox' id='choix4"+ i +"' name='check"+ i +"'></label></div>";
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='choix5"+ i +"'>Choix r&eacuteponse n&deg;5 : </label><div class='col-sm-7'><input class='form-control' type='text' id='choix5"+ i +"' name='choix5"+ i +"'></div><label classe='radio'><input type='radio' class='checkbox' id='choix5"+ i +"' name='check"+ i +"'></label></div>";
		question = question + "<div class='form-group'><label class='control-label col-sm-2' for='question'>Type d'&eacutecriture reponse :</label><div class='col-sm-7'><select id='typeEcritureRep"+i+"' class='form-control' onchange='typeReponse(this.value, "+i+")'><option>Choisir le type d'&eacutecriture</option><option value='texte'>Texte</option><option value='image'>Image</option></select></div></div>";
		question = question + '<span id="texteRep'+i+'[]"></span><span id="imageRep'+i+'[]"></span><br/><br/>';
	}
	question = question + "<input id='nbQuestion' name='nbQuestions' type='hidden' value='"+ nbQuestion +"'>";
	question = question + "<input id='message' type='hidden' name='message'>";
	question = question + "<div class='form-group'><div class='col-sm-offset-2 col-sm-10'><button type='submit' id='boutonAjout' class='btn btn-default' onClick='envoi()'>Ajouter</button></div></div>";
	document.getElementById("questionEcriture").disabled=true;	
	afficheR = document.getElementById("question[]");
	afficheR.innerHTML = question;
}
function envoi()
{
	nbQuestion = (document.getElementById('nbQuestion').value);
	var typeQuestion;
	var typeReponse;
	var questionnaire = "<?xml version='1.0' encoding='ISO-8859-1'?><serie>\n";
	for(i=1; i<=nbQuestion; i++)
	{
 
		typeQuestion =  (document.getElementById('typeEcriture'+i+'').value);
		typeReponse =  (document.getElementById('typeEcritureRep'+i+'').value);
		if(typeQuestion == 'texte')
		{
			questionnaire = questionnaire + "<questionnaire><question type='texte'>"+ (document.getElementById('question'+i+'').value) +"</question>\n";
		}
		else
		{
			if(typeQuestion == 'image')
			{
				questionnaire = questionnaire + "<questionnaire><question type='image'>"+ (document.getElementById('question'+i+'').value) +"</question>\n";
			}
		}
 
		for(j=1; j<=5; j++)
		{	
			if(document.getElementById('choix'+j+''+i).checked)
			{
				questionnaire = questionnaire + "<choix bon='O'>"+ (document.getElementById('choix'+j+i+'').value) +"</choix>\n";
			}
			else
			{
				questionnaire = questionnaire + "<choix bon='N'>"+ (document.getElementById('choix'+j+i+'').value) +"</choix>\n";
			}
		}	
 
		if(typeReponse == 'texte')
		{
			questionnaire = questionnaire + "<reponse type='texte'>"+ (document.getElementById('reponse'+i+'').value) +"</reponse></questionnaire>\n";
		}
		else
		{
			if(typeReponse == 'image')
			{
				questionnaire = questionnaire + "<reponse type='image'>"+ (document.getElementById('reponse'+i+'').value) +"</reponse></questionnaire>\n";
			}
		}
		alert(questionnaire);
	}
	document.getElementById("message").setAttribute("value", questionnaire);
 
 
}
function typeQuestion(selection, i)
{
 
	if(selection == 'texte')
	{
		texte = "<div class='form-group'><label class='control-label col-sm-2' for='question'>Question "+ i +" : </label><div class='col-sm-7'><input class='form-control' type='text' id='question"+ i +"' name='question"+ i +"''></div></div>";
		document.getElementById("typeEcriture"+i+"").disabled=true;	
		afficheR = document.getElementById("texte"+i+"[]");
		afficheR.innerHTML = texte;
	}
	else
	{
		if(selection == 'image')
		{
			image = "<div class='form-group'><label class='control-label col-sm-2' for='question'>Question "+ i +" : </label><div class='col-sm-7'><input class='form-control' type='file' id='question"+ i +"' name='question"+ i +"''></div></div>";
			document.getElementById("typeEcriture"+i+"").disabled=true;	
			afficheR = document.getElementById("image"+i+"[]");
			afficheR.innerHTML = image;
		}
	}
}
function typeReponse(selection, i)
{
	if(selection == 'texte')
	{
		texte = "<div class='form-group'><label class='control-label col-sm-2' for='reponse"+ i +"'>R&eacuteponse : </label><div class='col-sm-7'><input class='form-control' type='text' id='reponse"+ i +"' name='reponse"+ i +"'></div></div><br/><br/>";
		document.getElementById("typeEcritureRep"+i+"").disabled=true;	
		afficheR = document.getElementById("texteRep"+i+"[]");
		afficheR.innerHTML = texte;
	}
	else
	{
		if(selection == 'image')
		{
			image = "<div class='form-group'><label class='control-label col-sm-2' for='reponse"+ i +"'>R&eacuteponse : </label><div class='col-sm-7'><input class='form-control' type='file' id='reponse"+ i +"' name='reponse"+ i +"'></div></div><br/><br/>";
			document.getElementById("typeEcritureRep"+i+"").disabled=true;	
			afficheR = document.getElementById("imageRep"+i+"[]");
			afficheR.innerHTML = image;
		}
	}
}

Le fichier creation.php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	if(isset($_POST['message']))
	{
		$matiere = $_POST['matiere'];
		$annee = $_POST['annee'];
		$message = $_POST['message'];
		$files = glob("../xml/".$matiere.$annee."_*.xml");
		$file = "../xml/".$matiere.$annee."_".(count($files)+1).".xml";
		$fileopen = fopen("$file", "a");
		fwrite($fileopen, $message);
		fclose($fileopen);
		header("location: ../../index.php/accueil");
	}
?>

Je ne m'attends pas à ce que quelqu'un s'amuse à lire tout le code je l'ai mis juste à titre informatif. Je veux surtout savoir si c'est possible car j'ai cherché sur internet et je n'ai rien trouvé sur le sujet je commence à croire que je vais devoir chercher un autre solution.

En espérant que vous puissiez m'aider.
Cordialement
Bloxas

[SylvainPV]

Il existe l'attribut multiple sur <input type="file" multiple>. Mais ce n'est pas supporté partout.
Le mieux est que tu partes d'une bibliothèque JavaScript existante pour gérer les transferts multiples en parallèle.

Bibliothèques:
http://resumablejs.com/
http://www.uploadify.com/
https://www.quora.com/What-is-the-be...multiple-files

Tuto sans bibliothèque (en anglais) :
http://robertnyman.com/2010/12/16/ut...ultiple-files/

[Bloxas_]

Merci je test ça lundi à la première heure et je vous tiendrai au courant.

[ABCIWEB]

Salut,

Sinon pour avoir une solution ajax/php prête à l'emploi tu peux utiliser ce module d'upload ajax.

Il y a plus d'une douzaine d'exemples dont deux customisés, et tous fonctionnels avec php côté serveur. En moins de trois minutes tu peux donc faire tes premiers tests, suffit de dézipper le dossier en téléchargement, le transférer sur ton serveur et c'est tout

C'est basé sur le même principe que les lib citées plus haut avec l'utilisation des techniques de fragmentation (chunk) et queing pour surpasser les limitations serveur concernant la taille et le nombre de fichiers uploadés.

- De nombreuses informations possibles en temps réel : nom, taille, progression, temps restant, vignette si le fichier est une image, etc.
- Classes prédéfinies pour définir les retours d'information sans programmation javascript.
- Styles événementiels pour gérer l'affichage des informations en temps réel sans programmation javascript.
- Fonctions javascript événementielles pour des besoins plus avancés.
- Système de sauvegarde automatique pour les gros fichiers : en cas d'arrêt du téléchargement d'un fichier, volontairement ou suite à une panne internet ou serveur ou électrique, le visiteur peut re soumettre le même fichier et utiliser la partie déjà sauvegardée.

La classe javascript pourrait être utilisée avec d'autres langages serveur mais c'est beaucoup plus facile avec php puisque qu'une classe et des exemples d'upload php sont déjà installés pour rendre les exemples directement fonctionnels.

Parmi les exemples fournis on trouve :
- Upload multiple multiple (plusieurs fichiers dans plusieurs champs d'upload).
- Retour du nouveau nom du fichier si celui-ci à été renommé suite à un doublon sur le serveur, ou en variante information avant l'upload de l'existence de doublon sur le serveur (ces fonctionnalités sont implémentées dans les boites de téléchargement customisées).
- Upload avec redimensionnements d'images côté serveur et système de gestion des erreurs fatales possibles (memory_limit, max_execution_time etc.).
- Recadrage (crop) côté client avec le plugin "imgareaselect" installé, suivi d'un upload, recadrage et optionnellement redimensionnement côté serveur. Supporte le crop multiple et mutiple multiple. Donne également un exemple de champ additionnel pour chaque fichier qui pourrait contenir une légende ou un titre...
- Et bien d'autres...

[Bloxas_]

Bonjour et merci de votre aide.

J'utilise le module proposé par ABCIWEB mais je suis confronté à un problème. J'ai réussi a faire ce que je voulais quand mes <input type="file" name="upload_1"/> sont écrit sur ma page php. Mais j'ai aussi des <input type="file" name="upload_1"/> qui sont généré dynamiquement par mon js et dans ce cas les images ne sont plus prise en compte dans la prévisualisation et tout le reste après.

[ABCIWEB]

Salut,

Faudrait nous dire exactement et précisément comment fonctionne ton système du point de vue de l'utilisateur. Que doit-il faire et dans quel ordre, à quel moment ajoute-t-il des fichiers dynamiquement en js ?
C'est une même série de formulaire qui se répète ? Pour te donner une solution il faudrait que je comprenne ce que tu veux faire .