Bagaimana untuk Mengemas kini Label Input Fail Bootstrap 4 secara Dinamik?

Bermula dengan Bootstrap 4 Bootbox

Memahami Cabaran

Dalam Bootstrap 4, komponen input fail tersuai membentangkan label "Pilih fail" tetap, tanpa mengira pemilihan fail. Untuk mengemas kini label ini secara dinamik dengan nama fail yang dipilih, pemahaman tentang manipulasi JavaScript dan CSS adalah penting.

Penyelesaian Input Fail Bootstrap 4

Versi 4.5 dan Di Atas:

• Input fail tersuai tidak lagi tersedia. Untuk menyesuaikan teks butang fail, CSS atau JavaScript mesti digunakan.

Versi 4.1 dan Ke Atas:

• Teks pemegang tempat berada dalam adat -elemen label-fail.

• Tetapkan teks label tersuai melalui CSS:

  <code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
  }</code>

  Salin selepas log masuk

Alternatif untuk Bootstrap 4.1 dan Ke Atas:

• Gunakan pemalam input fail tersuai, seperti: https://www.codeply.com/go/uGJOpHUd8L/file-input

Asal Penyelesaian untuk Bootstrap 4 Alpha 6:

Menyesuaikan Pemegang Tempat Awal dan Teks Butang:

• Timpa pemegang tempat lalai dan teks butang menggunakan CSS :

  <code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
  }
  
  #customFile .custom-file-control:lang(en)::before {
  content: "Click me";
  }</code>

  Salin selepas log masuk

Mengambil Nama Fail dan Mengemas kini Nilai Input:

• Gunakan JavaScript/jQuery untuk mendapatkan fail yang dipilih nama:

  <code class="javascript">$('.custom-file-input').on('change', function() {
    var fileName = $(this).val();
  });</code>

  Salin selepas log masuk

• Sembunyikan teks pemegang tempat apabila fail dipilih, menggunakan kelas CSS:

  <code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
  }</code>

  Salin selepas log masuk

• Togol CSS kelas pada pemilihan fail dan masukkan nama fail ke dalam rentang fail kawalan-bentuk:

  <code class="javascript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
  });</code>

  Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Label Input Fail Bootstrap 4 secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!