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!
