HTML: zmiana przycisku do uploadu pliku

Przycisk do wgrywania pliku na serwer tworzymy za pomocą tagu input:

<input type="file" name="pic" id="file" class="btn-file-upload-input" value="Wybierz">

Wygląda on tak:

Zobacz ten przycisk w różnych przeglądarkach. Nie tylko wygląd się zmienia, ale również tekst! Jak nad tym zapanować?

Można użyć sztuczki, polegającej na ukryciu przycisku i użyciu jego etykiety jako przycisku:

<label for='file' class='btn-file-upload-label'>Wgraj plik</label>
<input type="file" name="pic" id="file" class="btn-file-upload-input" value="Wybierz" style="display: none;">

<style>
label.btn-file-upload-label {display: inline-block; padding: 5px 10px; background-color: #886dff; color: white; font-size: 18px; text-transform: uppercase; cursor: pointer;}
</style>

W ten sposób uzyskamy taki wygląd przycisku:

Tyle że teraz nie wyświetla się nazwa wybranego pliku. Aby nazwa się wyświetlała, należy zmodyfikować powyższy kod w następujący sposób:

<label for='file' class='btn-file-upload-label'>Wgraj plik</label>
<input type="file" name="pic" id="file" class="btn-file-upload-input" value="Wybierz" style="display: none;">
<span id="file-name">Wybierz plik!</span>

<style>
label.btn-file-upload-label {display: inline-block; margin-right: 5px; padding: 5px 10px; background-color: #886dff; color: white; font-size: 18px; text-transform: uppercase; cursor: pointer;}
#file-name {font-size: 16px; font-weight: bold;}
</style>
<script>
  document.getElementById("file").onchange = function() {
  var filename = this.files[0].name;
  document.getElementById("file-name").innerHTML = filename;
};
</script>

Ostatecznie przycisk wygląda tak:

Wybierz plik!
Pani Marta
Jestem Marta. Pani Marta. I piszę o rzeczach, które inspirują mnie i ciekawią w pracy web developera. Na moim blogu znajdziesz porady dotyczące WordPressa i programowania stron, a także moje osobiste przemyślenia na najróżniejsze tematy.

Masz pytania lub uwagi? Zostaw komentarz :-)

Pola oznaczone gwiazdką są obowiązkowe.

Podaj swoje imię lub nazwę. Ta nazwa będzie widoczna przy Twoim komentarzu.
Napisz komentarz.