web-dev-qa-db-fra.com

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

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:

image showing browse and upload button

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

image showing a file search dialog box with a file selected

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

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

javascripthtmljavascript-events
125
Moon

Écoutez l'événement du changement.

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

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
37
Clem

façon jQuery:

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

    // your code
});
11
Zanon

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

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>
3
RegarBoy

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

1
anthony