web-dev-qa-db-fra.com

Comment gérer l'événement onchange sur le type d'entrée = fichier dans jQuery?

Le code est:

<input ID="fileUpload1" runat="server" type="file"

Ce qui suit fonctionne bien:

<input onchange="javascript:alert('hola');" ID="fileUpload1"  runat="server" type="file"

Je voudrais obtenir ce résultat en utilisant jQuery, mais cela ne fonctionne pas:

$('#fileUpload1').change(function (e) {
    alert("hola");
});

Il me manque quelque chose? (Edit: Oui, j'ai oublié d'inclure le fichier * .js.)

45
anmarti

Démo: http://jsfiddle.net/NbGBj/

$("document").ready(function(){

    $("#upload").change(function() {
        alert('changed!');
    });
});
114
Shabnam K

Ou pourrait être:

$('input[type=file]').change(function () {
    alert("hola");
});

Pour être précis: $('input[type=file]#fileUpload1').change(...

10
Alex Ball

Cela devrait fonctionner correctement, vous encapsulez le code dans un appel $(document).ready()? Si ce n'est pas le cas, utilisez live i.e.

$('#fileupload1').live('change', function(){ 
    alert("hola");
});

Voici un jsFiddle de ce travail contre jQuery 1.4.4

4
Chris

Ceci jsfiddle fonctionne bien pour moi.

$(document).delegate(':file', 'change', function() {
    console.log(this);
});

Remarque: .delegate () est la méthode de liaison d'événement la plus rapide pour jQuery <1.7: méthodes de liaison d'événement

4
Simon

Essayez d'utiliser ceci:

HTML:

<input ID="fileUpload1" runat="server" type="file">

JavaScript:

$("#fileUpload1").on('change',function() {
    alert('Works!!');
});

Un séjour sans faille

2
Arpit Srivastava
 $('#fileupload').bind('change', function (e) { //dynamic property binding
alert('hello');// message you want to display
});

Vous pouvez aussi utiliser celui-ci

2
Bhushan Pawar