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. Od kilku lat pracuję w WordPressie i ciągle jestem pod wrażeniem jego możliwości. Na moim blogu dzielę się prostymi sposobami na bezwtyczkowe ulepszenie swojej strony. Jeśli brakuje Ci czegoś w tym wpisie lub chcesz, abym poruszyła temat, na którym Ci zależy, daj znać w komentarzu!

Dodaj komentarz

*

*

*

Twój adres e-mail nie zostanie opublikowany.