Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengemas kini Label Input Fail Bootstrap 4 secara Dinamik?
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:
Versi 4.1 dan Ke Atas:
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:
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!