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

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