Récupérer les valeurs d'un input file multiple [Résolu]

identifiant_bidon · 20/08/2011, 06h10

Bonjour,

je ne sais pas si ce que je veux faire est faisable. Voici mon souci :

Je voudrais proposer pour mon site une fonctionnalité d'upload de photos. Je veux permettre d'uploader plusieurs photos "en même temps".
J'utilise un champ file comme ceci :

Code :

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

<input type="file" multiple="multiple" id="selected_photos" name="selected_photos[]" style="border:1px solid #3C2302" onChange="alert(this.value);"/>

Dans un div en dessous, je voudrais afficher un tableau dans lequel se trouveront les différents fichiers que je viens de sélectionner. Comment faire ceci ?
(L'alert que j'ai mis sur mon onChange ne m'affiche toujours qu'un seul fichier, c'est pourquoi je me demande si c'est faisable)

Merci beaucoup

jreaux62 · 20/08/2011, 10h41

Bonjour,
j'ai trouvé ceci sur le web, que j'ai ré-écrit (et un peu corrigé).

Je le mets juste pour info :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
	<script type="text/javascript">
	function drop() {
 
		var fichiers = document.getElementById('fileinput').files;
 
		// nombre de fichiers
		document.getElementById('nbfic').innerHTML = "nombre de fichiers : "+fichiers.length;
 
		// liste des noms de fichiers
		var listefiles = '';
		for(var j=0;j<fichiers.length;j++){
			listefiles += fichiers[j].name+"<br />\n";
		}
 
		document.getElementById('listefiles').innerHTML = listefiles;
 
		// tableau des fichiers : size - name - type
		for(var j=0;j<fichiers.length;j++){
 
			var tbrow = document.getElementById("tabsfill").insertRow(-1)
			var zozo;
			tbrow.insertCell(0)
			zozo = document.createTextNode(fichiers[j].size)
			tbrow.cells[0].appendChild(zozo);	
 
			tbrow.insertCell(1)
			zozo = document.createTextNode(fichiers[j].name)
			tbrow.cells[1].appendChild(zozo);	
 
			tbrow.insertCell(2)
			zozo = document.createTextNode(fichiers[j].type)
			tbrow.cells[2].appendChild(zozo);		
 
		}
	};
	</script>
 
	<style type="text/css">
#tabs th { border:1px solid #ccc; padding:2px; }
#tabs td { border:1px solid #ccc; padding:2px; }
	</style>
</head>
 
<body>
 
<?php
?>
 
<div>
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<input type="file" multiple="multiple" id="fileinput" onchange="drop();"/>
		<input type="submit" id="btnLoad" value="Load" />
	</form>
</div>
 
<p id="nbfic"></p>
<p id="listefiles"></p>
 
<table id="tabs">
	<thead>
		<tr>
			<th>taille de fichier</th>
			<th>nom de fichier</th>
			<th>type de fichier</th>
		</tr>
	</thead>
	<tbody id="tabsfill">
	</tbody>
</table>
 
 
</body>
</html>

- Ca fonctionne très bien sur mozilla firefox,
- moins bien sur safari (nom : ok, type : pas tous, taille fichier : zéro)
- et ... ôhhhh surprise !! ... pas du tout sur IE8 !!

-> multiple ou multiple="true" ou multiple="multiple" :
IE8, apparemment, ne veut même pas entendre parler de choix multiple ! (lire cette charmante discussion)

Solution :
-> "à l'ancienne" (amélioré !) : Upload multiple de fichiers
=> Ou utiliser un module d'upload multiple en flash.

identifiant_bidon · 22/08/2011, 14h40

Super merci pour ta réponse jreaux62

Apparemment, IE ne se charge pas de ce type de champ en multiple. La seule solution serait d'utiliser Flash.

Même des sites comme Facebook n'ont pas trouvé la parade sous IE. Facebook se contente de présenter plusieurs input et d'uploader les fichiers un par un. Du coup, je vais simplement utiliser la solution que tu proposes jreaux62 (si même des géants du web ne le font pas, j'vais pas me casser la tête

)

jreaux62 · 22/08/2011, 15h04

Il me semble que facebook propose l'alternative :
- sous IE -> plusieurs input
- autres - input multiple
(mais pas sûr)

Ca suppose d'écrire 2 codes. 2 fois plus de boulot, mais au moins, on a des input multiple sur les bons navigateurs !

En attendant qu'IE se mette à jour, on pourrais envisager d'aller déverser plusieurs tonnes de purin sur leur locaux et dans leur bureaux ...

20/08/2011, 06h10	#1
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Récupérer les valeurs d'un input file multiple Bonjour, je ne sais pas si ce que je veux faire est faisable. Voici mon souci : Je voudrais proposer pour mon site une fonctionnalité d'upload de photos. Je veux permettre d'uploader plusieurs photos "en même temps". J'utilise un champ file comme ceci : Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="file" multiple="multiple" id="selected_photos" name="selected_photos[]" style="border:1px solid #3C2302" onChange="alert(this.value);"/> Dans un div en dessous, je voudrais afficher un tableau dans lequel se trouveront les différents fichiers que je viens de sélectionner. Comment faire ceci ? (L'alert que j'ai mis sur mon onChange ne m'affiche toujours qu'un seul fichier, c'est pourquoi je me demande si c'est faisable) Merci beaucoup __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

22/08/2011, 14h40	#3
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Super merci pour ta réponse jreaux62 Apparemment, IE ne se charge pas de ce type de champ en multiple. La seule solution serait d'utiliser Flash. Même des sites comme Facebook n'ont pas trouvé la parade sous IE. Facebook se contente de présenter plusieurs input et d'uploader les fichiers un par un. Du coup, je vais simplement utiliser la solution que tu proposes jreaux62 (si même des géants du web ne le font pas, j'vais pas me casser la tête ) __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

22/08/2011, 15h04	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Il me semble que facebook propose l'alternative : - sous IE -> plusieurs input - autres - input multiple (mais pas sûr) Ca suppose d'écrire 2 codes. 2 fois plus de boulot, mais au moins, on a des input multiple sur les bons navigateurs ! En attendant qu'IE se mette à jour, on pourrais envisager d'aller déverser plusieurs tonnes de purin sur leur locaux et dans leur bureaux ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email