Bagaimana untuk Mengubah Suai Paparan Pemilih Fail dalam Bootstrap?

Susan Sarandon
Lepaskan: 2024-10-31 09:27:30
asal
434 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

Menukar teks butang boleh dilakukan dengan CSS:

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

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
});</code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!