jQuery changement de méthode sur input type="file"

j'essaie d'adopter jQuery à 100% avec son API simple et élégante mais j'ai rencontré une incohérence entre L'API et le HTML direct que je n'arrive pas à comprendre.

j'ai un script de téléchargement de fichier AJAX (qui fonctionne correctement) que je veux exécuter chaque fois que la valeur d'entrée du fichier change. Voici mon code de travail:

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

quand je convertis l'événement onchange en une implémentation jQuery:

$('#imageFile').change(function(){ uploadFile(); });

le résultat n'est pas le même. Avec l'attribut onchange , la fonction uploadFile() est appelée à chaque fois que la valeur est modifiée comme prévu. Mais avec l'API jQuery .change() le gestionnaire d'événements, l'événement ne déclenche que la première fois qu'une valeur est changée. Tout changement de valeur après cela est ignoré. Ça ne me semble pas juste, mais ça ne peut pas être une erreur de jQuery, n'est-ce pas?

quelqu'un d'autre A rencontré le même problème et avez vous une solution ou une solution de le problème autre que ce que j'ai décrit ci-dessus?

62
demandé sur PeeHaa 2010-04-27 16:47:28

3 réponses

est-ce que le uploader ajax rafraîchit votre élément d'entrée? si donc vous devriez considérer l'utilisation .live() la méthode.

 $('#imageFile').live('change', function(){ uploadFile(); });

mise à jour:

de jQuery 1.7+ vous devez utiliser maintenant .le ()

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
83
répondu Luis Melgratti 2013-10-12 01:47:32

de jQuery 1.7, l' .la méthode live () est dépréciée. Utiliser. sur() pour attacher les gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery devraient utiliser .délégué() de préférence .vivre.)( Référence: http://api.jquery.com/on /

$('#imageFile').on("change", function(){ uploadFile(); });
61
répondu macio.Jun 2017-02-17 19:20:37

je ne pouvais pas obtenir IE8+ à travailler en ajoutant un jQuery gestionnaire d'événement à l'entrée de fichier de type. J'ai dû aller à l'ancienne et ajouter l'attribut onchange="" à la balise d'entrée:

<input type='file' onchange='getFilename(this)'/>

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}

EDIT:

function getFileName(elm) {
   var fn = $(elm).val();
   var filename = fn.match(/[^\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}
10
répondu rodney hise 2018-06-11 09:48:53