input type=file

pytanie zadane 1 kwietnia 2018 w HTML i CSS przez halotelefonek Bywalec (2,410 p.)

Witam. Mam taki kod w html ściągnięty z bootstrapa

<div class="input-group mb-3">
  <div class="input-group-prepend">
  <span class="input-group-text">Zdjęcie do historii :</span>
  </div>

  <div class="custom-file">
  <input type="file" class="custom-file-input" id="inputGroupFile01" name="file_historia">
  <label class="custom-file-label" for="inputGroupFile01"></label>
  </div>
</div>

Co zrobić żeby w po wyborze w tym polu pojawiała się nazwa pliku, bo w normalnym inputcie nie ma z tym problemu.

z góry dzięki za pomoc :)

1 odpowiedź

odpowiedź 1 kwietnia 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)
edycja 1 kwietnia 2018 przez Kamil Łydka

Coś takiego może? Na szybko wymyśliłem, więc nie zaprzeczam, że można to może zrobić ładniej. Użyłem jQuery, bo się domyślam, że skoro używasz Boostrapa, to w parze z jQuery, ale oczywiście możesz sobie to przerobić na zwykły JS.

$("#inputGroupFile01").bind("change", function(){
  let fileName = this.value.split('\\').pop();
  $("#file-name").html(fileName);
});

Zwróć uwagę, że musisz dopisać do swojego labela id="file-name".

Jakbyś czegoś nie rozumiał z tego kodu, to daj znać. Postaram się wytłumaczyć.

komentarz 1 kwietnia 2018 przez halotelefonek Bywalec (2,410 p.)

Wkleiłem ten kod w znaczniki <script> i dodałem id="file-name" jak pisałeś i coś mi nie chodzi. skrypt wkleiłem przed znacznik </body> ale nie wiem czemu nie działa,

z góry dzięki za pomoc

komentarz 1 kwietnia 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Konsola co pokazuje? F12 --> console

(upewnij się, że masz dołączone jQuery. Jak nie chcesz jQuery, to przerób kod na bez jQuery :))

komentarz 1 kwietnia 2018 przez halotelefonek Bywalec (2,410 p.)

mam z dołu wklejone

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

komentarz 1 kwietnia 2018 przez halotelefonek Bywalec (2,410 p.)

a dokładnie 3 takie linijki z bootstrapa

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>