Bagaimana untuk Mengubah Suai Paparan Pemilih Fail dalam Bootstrap?

Input Fail Bootstrap: Mengubah Suai Paparan Pemilih Fail

Apabila menggunakan penyemak imbas fail Bootstrap 4, anda mungkin menghadapi isu memaparkan "Pilih" lalai fail..." teks. Teks ini ditetapkan menggunakan CSS dalam elemen .custom-file-control, yang mungkin sukar untuk diubah suai menggunakan JavaScript.

Bootstrap 5

Dalam Bootstrap 5, tersuai input fail telah dialih keluar. Oleh itu, mengubah suai paparan pemilih fail memerlukan teknik CSS atau JavaScript tersuai.

Bootstrap 4.4

Untuk memaparkan nama fail yang dipilih dalam Bootstrap 4.4, JavaScript boleh digunakan:

<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling;
  nextSibling.innerText = fileName;
});</code>

Bootstrap 4.1

Dalam Bootstrap 4.1 dan seterusnya, pemegang tempat "Pilih fail..." ditetapkan dalam elemen .custom-file-label:

<code class="html">&lt;label class=&quot;custom-file-label&quot; for=&quot;exampleInputFile&quot;&gt;
  Select file...
&lt;/label&gt;</code>

Menukar teks butang boleh dilakukan dengan CSS:

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

Jawapan Asal (Bootstrap 4 Alpha 6)

Untuk mengubah suai pemegang tempat awal dan teks butang, CSS boleh digunakan:

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

Untuk mendapatkan semula nama fail yang dipilih dan mengemas kini paparan, JavaScript boleh digunakan:

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

Walau bagaimanapun, kerana teks pemegang tempat ialah elemen pseudo, JavaScript tidak boleh mengubah suainya secara langsung. Penyelesaian adalah dengan menambah kelas CSS yang menyembunyikan kandungan pseudo dan meletakkan nama fail dalam rentang .form-control-file:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Paparan Pemilih Fail dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!