Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengubah Suai Paparan Pemilih Fail dalam Bootstrap?

Bagaimana untuk Mengubah Suai Paparan Pemilih Fail dalam Bootstrap?

Susan Sarandon
Susan Sarandonasal
2024-10-31 09:27:30428semak imbas

How to Modify the File Selector Display in 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"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn