HTML <input type = 'file'> Dateiauswahlereignis

142

Nehmen wir an, wir haben diesen Code:

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

was dazu führt:

Bild zeigt die Schaltfläche zum Durchsuchen und Hochladen

Wenn der Benutzer auf die Schaltfläche "Durchsuchen ..." klickt, wird ein Dialogfeld zur Dateisuche geöffnet:

Bild zeigt ein Dialogfeld zur Dateisuche mit einer ausgewählten Datei

Der Benutzer wählt die Datei entweder durch Doppelklicken auf die Datei oder durch Klicken auf die Schaltfläche "Öffnen" aus.

Gibt es ein Javascript-Ereignis, mit dem ich benachrichtigt werden kann, nachdem die Datei ausgewählt wurde?

Mond
quelle
5
Was für eine funky alte Windows-Benutzeroberfläche!
El-Burritos
@ El-Burritos dies wurde im Jahr 2010 veröffentlicht; Natürlich ist es eine alte Windows-Benutzeroberfläche: D
Simon Cheng

Antworten:

179

Hören Sie sich das Änderungsereignis an.

input.onchange = function(e) { 
  ..
};
Anurag
quelle
3
Wir werden es wo schreiben ... in Javascript-Skript-Tags
Moon
5
Ja, in Skript-Tags, oder Sie können es als Attribut ( <input type="file" onchange="..." />) hinzufügen, obwohl dies nicht empfohlen wird.
Anurag
7
Beachten Sie, dass in IE7 und 8 das Änderungsereignis nicht zum Formularereignis hochspringt. Sie müssen Ihren Listener auf das <input> -Tag setzen.
xer0x
35
Was ist, wenn ein Benutzer eine Datei "neu laden" muss? onchange wird nicht ausgelöst, sollte aber trotzdem neu geladen werden, als würde es zum ersten Mal geladen.
Bryc
11
Beachten Sie, dass dies nicht funktioniert, wenn der Benutzer dieselbe Datei mehr als einmal hintereinander auswählt, da sich die Datei nicht geändert hat.
Bob0the0mighty
44

Wenn Sie die Datei neu laden müssen, können Sie den Wert der Eingabe löschen. Wenn Sie das nächste Mal eine Datei hinzufügen, wird das Ereignis "Bei Änderung" ausgelöst.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Clem
quelle
5
Das funktioniert gut, aber beachten Sie das seltsame Verhalten von IE <11. Sie können den Wert der Eingabe nicht ändern, sodass Sie höchstwahrscheinlich eine Problemumgehung benötigen. stackoverflow.com/questions/9011644/…
Oleksandr Tkalenko
14

jQuery Weg:

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

    // your code
});
Zanon
quelle
3

Das Change-Ereignis wird auch dann aufgerufen, wenn Sie auf Abbrechen klicken.

Anthony
quelle
2
Es wäre hilfreich, wenn Sie einen Code zur Erläuterung Ihrer Antwort bereitstellen würden, da im
Fragencode-
Ich denke, @anthony bezieht sich auf das folgende Szenario: Wählen Sie eine Datei aus. Öffnen Sie nun die Dateiauswahl erneut, klicken Sie diesmal jedoch auf Abbrechen. Da beim zweiten Mal keine Datei ausgewählt wurde, wird das Dateieingabesteuerelement zurückgesetzt, wodurch die anfängliche Auswahl geändert wird, und das Änderungsereignis wird ausgelöst.
dvlsc
Ich habe es auf Chrome 83 versucht und das Ereignis wird nicht ausgelöst, wenn ich auf die Schaltfläche Abbrechen klicke. Diese Antwort ist ziemlich alt und ich denke, sie muss behoben worden sein, zumindest in Chrome.
Saeed Ahadian
3

So habe ich es mit reinem JS gemacht:

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
quelle