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>

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>

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>

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

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

• 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>

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!