web-dev-qa-db-fra.com

Méthode de changement jQuery sur le type d'entrée = "fichier"

J'essaie d'utiliser jQuery à 100% avec son API simple et élégante, mais je suis tombé sur une incohérence entre l'API et le code HTML simple que je n'arrive pas à comprendre.

J'ai un 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()">

Lorsque 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 à tout moment si la valeur est modifiée comme prévu. Mais avec le gestionnaire d'événements .change() de l'API jQuery, l'événement ne se déclenche que la première fois qu'une valeur est modifiée. Toute modification de valeur après est ignorée. Cela me semble faux, mais jQuery ne peut sûrement pas en être responsable, non?

Quelqu'un d'autre a-t-il rencontré le même problème et avez-vous une solution de contournement ou une solution au problème autre que celle décrite ci-dessus?

jqueryfile-uploadinputevent-handlingonchange
66
gurun8

le programme de téléchargement ajax actualise-t-il votre élément d’entrée? si c'est le cas, vous devriez envisager d'utiliser la méthode .live ().

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

mise à jour:

depuis jQuery 1.7+, vous devriez utiliser maintenant .on ()

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
87
Luis Melgratti

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d’événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () plutôt que .live (). Voir: http://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });
63
macio.Jun

Je ne pouvais pas faire fonctionner IE8 + en ajoutant un gestionnaire d'événements jQuery au type d'entrée de fichier. Je devais aller à la vieille école et ajouter le onchange="" attribut à 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
rodney hise