HTML <input type = 'file'> Événement de sélection de fichier

144

Disons que nous avons ce code:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

ce qui se traduit par ceci:

image montrant le bouton de navigation et de téléchargement

Lorsque l'utilisateur clique sur le bouton 'Parcourir ...', une boîte de dialogue de recherche de fichiers s'ouvre:

image montrant une boîte de dialogue de recherche de fichier avec un fichier sélectionné

L'utilisateur sélectionnera le fichier soit en double-cliquant sur le fichier, soit en cliquant sur le bouton «Ouvrir».

Existe-t-il un événement Javascript que je peux utiliser pour être notifié après la sélection du fichier?

Lune
la source
6
Quelle ancienne interface utilisateur Windows géniale!
El-Burritos
@ El-Burritos cela a été publié en 2010; bien sûr, c'est une ancienne interface utilisateur Windows: D
Simon Cheng

Réponses:

181

Écoutez l'événement de changement.

input.onchange = function(e) { 
  ..
};
Anurag
la source
3
nous allons l'écrire où .. dans les balises de script javascript
Lune
5
oui dans les balises de script, ou vous pouvez l'ajouter en tant qu'attribut ( <input type="file" onchange="..." />) bien que ce ne soit pas recommandé.
Anurag
7
Notez que dans IE7 et 8, l'événement 'change' ne fait pas de bulles jusqu'à l'événement form. Vous devez mettre votre auditeur sur la balise <input>.
xer0x
36
Et si un utilisateur a besoin de «recharger» un fichier? onchange ne se déclenchera pas, mais il devrait tout de même se recharger comme s'il le chargeait pour la première fois.
bryc
11
Notez que cela ne fonctionne pas si l'utilisateur sélectionne le même fichier plus d'une fois de suite car le fichier n'a pas changé.
bob0the0mighty
46

Lorsque vous devez recharger le fichier, vous pouvez effacer la valeur d'entrée. La prochaine fois que vous ajoutez un fichier, l'événement «on change» se déclenchera.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Clem
la source
5
Cela fonctionne bien, mais soyez conscient du comportement étrange d'IE <11. Il ne vous permet pas de modifier la valeur de l'entrée, vous aurez donc probablement besoin d'une solution de contournement. stackoverflow.com/questions/9011644/…
Oleksandr Tkalenko
15

jQuery façon:

$('input[name=myInputName]').change(function(ev) {

    // your code
});
Zanon
la source
4

L'événement Change est appelé même si vous cliquez sur Annuler.

Anthony
la source
2
il serait utile que vous fournissiez du code pour expliquer votre réponse, car il n'y a pas d'événement de changement mentionné dans l'extrait de code Questions
DevDig
Je pense que @anthony fait référence au scénario suivant: Sélectionnez un fichier. Ouvrez à nouveau le sélecteur de fichiers, mais cette fois cliquez sur Annuler. Étant donné qu'aucun fichier n'a été sélectionné la deuxième fois, le contrôle d'entrée de fichier se réinitialise, modifiant ainsi sa sélection initiale, et l'événement de modification est déclenché.
dvlsc
Je l'ai essayé sur Chrome 83 et l'événement n'est pas déclenché lorsque je clique sur le bouton Annuler. Cette réponse est assez ancienne et je suppose qu'elle a dû être corrigée, du moins sur Chrome.
Saeed Ahadian le
3

C'est comme ça que je l'ai fait avec pur JS:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});
#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}
<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

RegarBoy
la source