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

Version imprimable

20/08/2011, 06h10
identifiant_bidon

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:

<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

Bonjour,
j'ai trouvé ceci sur le web, que j'ai ré-écrit (et un peu corrigé).
:alerte: Je le mets juste pour info :

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
<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 !! :aie:

-> 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.

22/08/2011, 14h40
identifiant_bidon

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 :D )
22/08/2011, 15h04
Invité

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 ...