2013-04-12 6 views
4

Existe-t-il un moyen de lier un événement lorsqu'un utilisateur sélectionne un fichier à télécharger et clique sur "Ouvrir"? Je souhaite déclencher l'événement lorsque l'utilisateur a cliqué sur Ouvrir.Liaison d'événement lors du transfert de fichier

enter image description here

+1

L'événement de modification du champ doit se déclencher à cette occasion –

+0

peut être dupliqué. Cochez cette case http://stackoverflow.com/questions/4096335/jquery-start-a-function-after-open-button-from-input-file-is-press – RicardoGonzales

Répondre

5

Dans ce scénario, l'événement change sera tiré.

Si vous avez ce HTML:

<input type="file" id="fileInput" /> 

Ensuite, utilisez ce JS:

window.onload = function() { 
    document.getElementById("fileInput").onchange = function() { 
     // this.value 
    }; 
}; 

(avec la possibilité d'utiliser addEventListener/attachEvent au lieu de définir la propriété onclick)

intérieur le gestionnaire, vous pouvez utiliser this.value pour obtenir le fichier sélectionné.

Bien sûr, avec jQuery, vous pouvez utiliser:

$(document).ready(function() { 
    $("#fileInput").on("change", function() { 
     // this.value OR $(this).val() 
    }); 
}); 

REMARQUE: Les gestionnaires window.onload et $(document).ready sont utilisés pour assurer que l'élément est disponible. Bien sûr, cet événement peut se produire beaucoup plus tard que nécessaire, car ils attendent que tous les éléments de la page soient prêts (et window.onload attend encore plus longtemps pour que des éléments tels que des images soient chargés). Une option consiste à lier le gestionnaire onchange immédiatement après l'élément sur la page ou à la fin du <body>.

+1

Le wrapper 'onload' de' window' est plutôt inutile si le script est placé à la fin de la page/après l'élément d'entrée. '=]' –

+1

@ FabrícioMatté C'est vrai, mais je n'aime pas faire ça et c'est fondamentalement la même chose que d'être à la fin du corps (un peu différent pour 'window.onload', mais quand même). Et je ne trouve pas exactement cela important lié à cette question. Néanmoins, je vais ajouter un peu d'information à ce sujet dans la réponse. Merci :) – Ian

Questions connexes