HTML <input type = 'file'> Sélection du fichier de l'événement

Question

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> 

qui se traduit par ceci:

Lorsque l'utilisateur clique sur le « Parcourir ... » bouton, une boîte de dialogue de recherche de fichier est ouvert:

L'utilisateur sélectionnera le fichier en double-cliquant sur le fichier ou en cliquant sur le bouton 'Ouvrir'.

Y at-il un événement Javascript que je peux utiliser pour être averti après la sélection du fichier?

Answer 1

Écouter l'événement change.

input.onchange = function(e) { 
    .. 
}; 

Answer 2

Lorsque vous devez recharger le fichier, vous pouvez effacer la valeur de l'entrée. La prochaine fois que vous ajouterez 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 

Answer 3

façon jQuery:

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

    // your code 
}); 

Answer 4

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

Answer 5

C'est la façon dont 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 { 
 
\t color: red; 
 
\t transform: scale(1.5); 
 
\t 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"> 
 
    \t  <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" /> 
 
\t  <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button> 
 
     </div> 
 
    </form> 
 
</section>