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

Question

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 straight-up que je ne peux pas tout à fait 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 convertir l'événement onchange à une mise en œuvre jQuery:

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

le résultat est 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 le gestionnaire d'événements de l'API jQuery .change(), l'événement se déclenche uniquement la première fois qu'une valeur est modifiée. Tout changement de valeur après cela est ignoré. Cela me semble faux, mais cela ne peut certainement pas être un oubli de la part de jQuery, n'est-ce pas?

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

Answer 1

est l'ajax uploader rafraîchissant votre élément d'entrée? Si oui, vous devriez envisager d'utiliser la méthode .live().

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

mise à jour:

de jQuery 1.7+, vous devez utiliser maintenant .on()

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

Answer 2

Je ne pouvais pas IE8 + pour travailler en ajoutant un gestionnaire d'événements jQuery pour le type d'entrée de fichier . Je devais aller de la vieille école et ajouter l'attribut onchange="" à la balise d'entrée:

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

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

Answer 3

À partir de jQuery 1.7, la méthode .live() est dépréciée. Utilisez .on() pour attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery devraient utiliser .delegate() de préférence à .live(). Référence: http://api.jquery.com/on/

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