Zdarzenie wyboru pliku <input type = 'file'> HTML

144

Powiedzmy, że mamy ten kod:

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

co skutkuje tym:

obraz przedstawiający przycisk przeglądania i przesyłania

Gdy użytkownik kliknie przycisk „Przeglądaj ...”, zostanie otwarte okno dialogowe wyszukiwania plików:

obraz przedstawiający okno dialogowe wyszukiwania plików z wybranym plikiem

Użytkownik wybiera plik, klikając go dwukrotnie lub klikając przycisk „Otwórz”.

Czy istnieje zdarzenie JavaScript, którego mogę użyć, aby otrzymać powiadomienie po wybraniu pliku?

javascript html javascript-events Księżyc
źródło
5
Co za funky stary interfejs systemu Windows!
El-Burritos
@ El-Burritos to zostało opublikowane w 2010 roku; oczywiście jest to stary interfejs systemu Windows: D
Simon Cheng

Odpowiedzi:

181

Posłuchaj wydarzenia zmiany.

input.onchange = function(e) { 
  ..
};
Anurag
źródło
3
napiszemy to gdzie… w tagach skryptu javascript
Księżyc
5
tak w tagach skryptu lub możesz dodać go jako atrybut ( <input type="file" onchange="..." />), chociaż nie jest to zalecane.
Anurag
7
Należy zauważyć, że w IE7 i 8 zdarzenie „zmiana” nie pojawia się w zdarzeniu formularza. Musisz umieścić odbiornik w tagu <input>.
xer0x
36
A co, jeśli użytkownik musi „przeładować” plik? onchange nie uruchomi się, ale nadal powinno przeładować się tak, jakby ładowało go po raz pierwszy.
bryc
11
Uwaga, to nie zadziała, jeśli użytkownik wybierze ten sam plik więcej niż raz z rzędu, ponieważ plik się nie zmienił.
bob0the0mighty
45

Kiedy musisz ponownie załadować plik, możesz usunąć wartość wejścia. Następnym razem, gdy dodasz plik, zostanie wyzwolone zdarzenie „przy zmianie”.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Clem
źródło
5
To działa dobrze, ale uważaj na dziwne zachowanie IE <11. Nie pozwala na zmianę wartości danych wejściowych, więc najprawdopodobniej będziesz potrzebować obejścia. stackoverflow.com/questions/9011644/…
Oleksandr Tkalenko
15

jQuery sposób:

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

    // your code
});
Zanon
źródło
3

Zdarzenie Change zostanie wywołane, nawet jeśli klikniesz Anuluj.

antoni
źródło
2
byłoby pomocne, gdybyś podał kod wyjaśniający odpowiedź, ponieważ nie ma zdarzenia zmiany wspomnianego we fragmencie kodu Pytania
DevDig
Myślę, że @anthony odnosi się do następującego scenariusza: Wybierz plik. Teraz ponownie otwórz selektor plików, ale tym razem kliknij Anuluj. Ponieważ żaden plik nie został wybrany po raz drugi, sterowanie wejściem pliku resetuje się, zmieniając w ten sposób swój początkowy wybór, i wyzwalane jest zdarzenie zmiany.
dvlsc
Wypróbowałem to w Chrome 83 i zdarzenie nie jest uruchamiane po kliknięciu przycisku Anuluj. Ta odpowiedź jest dość stara i myślę, że musiała zostać naprawiona, przynajmniej w Chrome.
Saeed Ahadian
3

Tak to zrobiłem z czystym 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>
Rozwiń fragment

RegarBoy
źródło