преодоление проблем Bootstrap 4 File Input

В Bootstrap 4 браузер файла представляет постоянный текст «Выберите файл ...», несмотря на выбор файла. Эта проблема проистекает из скрытого значения в классе CSS-контроля на заказ. Хотя можно получить значение выбранного файла, используя JavaScript, изменение текста заполнителя может быть более сложным.

настройка текста заполнителя и кнопок (Bootstrap 4.1)

с введением начальной загрузки 4.1, «Выберите файл». Чтобы изменить этот текст, просто добавьте Custom CSS или SASS следующим образом:

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

адресация скрытого значения заполнителя

bootstrap 4 Alpha 6 (исходный ответ)

1. Изменение начального текста заполнителя и кнопки:

Начальный текст заполнителя и кнопки хранятся в псевдо-элементах CSS. Чтобы настроить их, переопределите значения по умолчанию, используя: lang (en) :: after and: lang (en) :: перед селекторами, соответственно. Контент: «Выберите Файл ...»; } #customfile .custom-file-контроль: lang (en) :: перед { Контент: «Нажмите меня»; }

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

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

. Как только файл выбран, его имя можно получить с помощью JavaScript. Тем не менее, из-за того, что заполнитель был псевдоэлементом, не существует прямого способа манипулировать им через JavaScript. Вместо этого создайте дополнительный класс CSS, чтобы скрыть заполнителя после выбора файла:

. Контент: ""! Важно; }

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

bootstrap 5

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

. Custom-file-input :: After { Контент: «Текст кнопки»; } ]