javascript - HTML <input type='file'> filvalgshendelse

La oss si at vi har denne koden:

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

som resulterer i dette:

Når brukeren klikker på 'Bla gjennom...'-knappen, åpnes et dialogvindu for filsøk:

Brukeren vil velge filen enten ved å dobbeltklikke på filen eller ved å klikke på 'Åpne'-knappen.

Finnes det en Javascript-hendelse som jeg kan bruke for å bli varslet etter at filen er valgt?

Svar #1

Lytt til endringshendelsen.

 document.getElementById('input').addEventListener('change', function(e) {
  if (e.target.files[0]) {
    document.body.append('You selected ' + e.target.files[0].name);
  }
});
<input type="file" id="input">

Svar #2

Når du må laste inn filen på nytt, kan du slette verdien i input. Neste gang du legger til en fil, vil 'on change'-hendelsen utløses.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

Svar #3

jQuery-måte:

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

    // your code
});

Svar #4

Det er slik jeg gjorde det med ren 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;
  }
  warning.classList -= "warn";
  submit.disabled = false;
});
#warning {
    text-align: center;
    transition: 1s all;
}

#warning.warn {
    color: red;
    transform: scale(1.5);
}
<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>

Relaterte artikler