Bootstrap 4 Dosya Girişi

Bootstrap 4 dosya tarayıcısı ile uğraşıyorum. Eğer custom-file-control kullanırsam her zaman Choose file değerini göreceğim. https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Dosya seçildikten sonra dosya seç değerini değiştirmek istiyorum. Bu değer aslında css ``.custom-file-control:lang(en)::after ``` içinde gizli ve javascript ile nasıl erişip değiştireceğimi bilmiyorum. Seçilen dosyanın değerini şu şekilde alabiliyorum:

document.getElementById("exampleInputFile").value.split("\\").pop();

değişmem gerekmiyor

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

bir şekilde

Bağlantı: http://codepen.io/Matoo125/pen/LWobNp

Matej Vrzala M4
Edited question 2017ööp54öö9 Nisan 2017 в 9:54
Programlama
javascript jquery css twitter-bootstrap bootstrap-4
2017ööp52öö8 Nisan 2017 в 8:52
13 görünümler
Çözüm

Güncellenmiş 2018

Bootstrap 4.1+

Şimdi Bootstrap 4.1'de "Dosya seç..." yer tutucu metni custom-file-label içinde ayarlanmıştır:

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">

           Select file...

</div>

Gözat" düğme metnini değiştirmek için biraz ekstra CSS veya SASS gerekir. Ayrıca lang="" niteliğini kullanarak dil çevirisinin nasıl çalıştığına dikkat edin.

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

Başka Bir Bootstrap 4.1 Seçeneği

Alternatif olarak bu [özel dosya giriş eklentisini] kullanabilirsiniz (https://github.com/Johann-S/bs-custom-file-input)

https://www.codeply.com/go/uGJOpHUd8L/file-input

Bootstrap 4 Alpha 6 (Orijinal Cevap)

Bence burada iki ayrı sorun var.


        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>

1 - İlk yer tutucu ve düğme metni nasıl değiştirilir

Bootstrap 4'te initial yer tutucu değeri custom-file-control' üzerinde HTML diline dayalı bir CSS pseudo::after' öğesi ile ayarlanır. İlk dosya düğmesi (aslında bir düğme değildir ancak düğme gibi görünür) bir CSS pseudo ::before öğesi ile ayarlanır. Bu değerler CSS ile geçersiz kılınabilir...

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

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

**2 - Seçilen dosya adı değeri nasıl alınır ve değeri göstermek için giriş nasıl güncellenir?

Bir dosya seçildikten sonra, değer JavaScript/jQuery kullanılarak elde edilebilir.

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

Ancak, giriş için yer tutucu metin sözde bir öğe olduğundan, bunu Js/jQuery ile manipüle etmenin kolay bir yolu yoktur. Bununla birlikte, dosya seçildiğinde sözde içeriği gizleyen başka bir CSS sınıfına sahip olabilirsiniz...

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

Dosya seçildikten sonra .custom-file-control üzerindeki .selected sınıfını değiştirmek için jQuery kullanın. Bu, ilk yer tutucu değerini gizleyecektir. Ardından dosya adı değerini .form-control-file aralığına yerleştirin...

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

Daha sonra dosya yükleme veya yeniden seçme işlemlerini gerektiği gibi gerçekleştirebilirsiniz.

Codeply üzerinde demo (alpha 6)

Zim
Edited answer 2019ööp0öö11 Nisan 2019 в 11:00
Yorumlar (12)

Bu şekilde çözdüm.

Html:

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   Choose file...
</div>

JS:

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

Not: Seçilen dosya adı çok uzunsa etiket içindeki taşmayı gizleyecek .text-truncate sınıfından bahsettiği için ajax333221'e teşekkürler.

Elnoor
Edited answer 2018ösp13ös16 Temmuz 2018 в 4:13
Yorumlar (8)

Dosya tarayıcısının dilini değiştirmek için:__ ZimSystem]1'in bahsettiğine alternatif olarak (CSS'yi geçersiz kılmak), bootstrap dokümanları tarafından daha zarif bir çözüm önerilmektedir: SCSS'ye dil ekleyerek özel bootstrap stillerinizi oluşturun Konuyu buradan okuyabilirsiniz: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Not: bunun çalışması için belgenizde lang niteliğinin düzgün bir şekilde ayarlanmış olması gerekir

Dosya seçiminde değeri güncellemek için:__ Bunu şu şekilde satır içi js ile yapabilirsiniz:


      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>

Not: .split('\\').slice(-1)[0] kısmıC:\fakepath\ önekini kaldırır

Yorumlar (1)