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
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">
<label class="custom-file-label" for="exampleInputFile">
Select file...
</label>
</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.
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
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.
Bu şekilde çözdüm.
Html:
<div class="custom-file">
<input id="logo" type="file" class="custom-file-input">
<label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</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.
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:
<label class="custom-file">
<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>
</label>
Not: .split('\\').slice(-1)[0]
kısmıC:\fakepath\ önekini kaldırır