jquery forme type = "fichier" comment savoir quand un fichier a été sélectionné?

Question

Lorsqu'un utilisateur sélectionne un fichier, je souhaite qu'un autre champ de fichier apparaisse. Cela fonctionne pour le premier fichier, mais si je choisis un fichier dans le second champ, il ne sera plus appelé. Pourquoi pas?

script jquery

$(document).ready(function() { 
     var i = 1; 

     $('input:file[name$=\'uploadedFile'+(i-1)+'\']').change(function() { 
      var file = $(this).val(); 

      if(file !== null && file !== "") { 
       $(this).after("<input type=\"file\" name=\"uploadededFile"+i+"\" />"); 
       i++; 
      } 
     }); 
    }); 

formulaire html

<form action="PHP/file.php" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="MAX_FILE_SIZE" value="500000" /> 
    <input type="file" name="uploadedFile0" /> 
    <input type="submit" value="SUBMIT" /> 
</form> 

Answer 1

Lorsque vous écrivez $(...).change(function), vous ajoutez le gestionnaire des éléments qui sont actuellement dans l'objet jQuery. Lorsque vous ajoutez un nouveau <input>, il n'a aucun gestionnaire d'événements.

Vous devez appeler .live, qui gérera l'événement pour tous les éléments correspondants, peu importe quand ils ont été créés.
Par exemple:

$('input:file:last').live('change', function() { ... }); 

Notez que le sélecteur est évalué uniquement une fois, il ne sera pas ramasser des changements dans i. Au lieu de cela, vous devez utiliser :last.

Answer 2

Étant donné que ce code s'exécute uniquement lorsque votre page est chargée, votre gestionnaire onchange ne s'applique qu'à un élément d'entrée portant le nom uploadedFile0. Vous devez étendre votre gestionnaire d'événements pour créer un nouvel élément et pour lui lier la fonction de gestion d'événement appropriée.