Bagaimana untuk Mengubah Teks \'Pilih Fail...\' dalam Input Fail Bootstrap 4?

Input Fail Bootstrap 4: Menyesuaikan 'Pilih Fail'...

Input fail tersuai dalam Bootstrap 4 mempunyai teks pemegang tempat "Pilih fail ..." itu boleh menjadi sukar untuk diubah. Mari terokai dua isu berasingan:

1. Mengubah suai Pemegang Tempat Awal dan Teks Butang

Bootstrap 4 menetapkan pemegang tempat awal dan teks butang melalui elemen pseudo CSS berdasarkan bahasa HTML. Untuk mengatasi nilai ini, gunakan CSS tersuai:

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

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

2. Memaparkan Nama Fail Terpilih

Untuk mendapatkan nama fail yang dipilih, gunakan JavaScript/jQuery:

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

Walau bagaimanapun, memanipulasi teks pemegang tempat input tidak boleh dilakukan secara langsung. Sebaliknya, gunakan kelas CSS lain untuk menyembunyikan ruang letak awal sebaik sahaja fail dipilih dan memaparkan nama fail dalam elemen berdekatan:

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

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

Ini akan menyembunyikan lalai "Pilih fail..." teks dan paparkan nama fail yang dipilih. Anda kemudiannya boleh mengendalikan tindakan selanjutnya seperti muat naik fail atau pemilihan semula mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Teks \'Pilih Fail...\' dalam Input Fail Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!