Récupération de la valeur d'un input array() de type file

**victoires** · 09/09/2015, 15h22

Bonjour,

J'ai un formulaire qui donne la possibilité aux utilisateurs d'ajouter N pièces jointes, pour cela j'ai mis un bouton pour ajouter un champ de type file qu'on l'utilisateur fait un clic ...

Code :

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

1
2
3
4
5
6
7
8
9
10
<form method="post" enctype="multipart/form-data">
<span class='piece'><input type='file' name='file[]'/></span>
</form>
 
<p><button id='prependTo'>Ajouter une pièce jointe</button></p>  
<script type="text/javascript">
  $("#prependTo").click(function () {
   $("<input type='file' name='file[]'/><br/>").prependTo('.piece');
    });
</script>

Je vois bien l'input file qui s'ajoute après un clic sur le bouton, mais le problème est que le $_FILES['file'] me retourne toujours une seule entrée

Avez-vous une idée comment puis-je faire pour récupérer l'ensemble des pièces de l'array $_FILES['file'] ? Merci d'avance

Cordialement

**danielhagnoul** · 09/09/2015, 18h30

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
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
    .append-img {
      display: block;
      margin: 12px;
    }
  </style>
</head>
<body>
 
  <div>
      <input id="fileInput" type="file" accept="image/*" multiple>
  </div>
 
  <div id="divImg"></div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      $( "#divImg" ).on( "click", "img", function(){
        $( this ).remove();
      });
 
      $( "#fileInput" ).on( "change", function( e ){
 
        let
          w = 0, 
          file, 
          img, 
          reader = new FileReader(),
          files = e.target.files,
          limite = files.length,
          lire = function(){
            file = files[ w++ ];
 
            reader.onload = function( e ){
              $( "<img/>", {
                "class" : "appens-img",
                "src" : reader.result
              }).appendTo( "#divImg" );
            };
 
            reader.onloadend = function(){
              if ( w < limite ){
                lire();
              }
            };
 
            reader.readAsDataURL( file );
          };
 
        if ( limite > 0 ){
          lire();
        }
 
      });
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

Récupération de la valeur d'un input array() de type file

jQuery

Discussions similaires

Partager

Partager