Bootstrap 4의 파일 입력 제한 사항 해결

Bootstrap 4는 사용자가 파일을 쉽게 선택할 수 있도록 사용자 정의 파일 입력 구성 요소를 제공합니다. 그러나 "파일 선택..." 자리 표시자 텍스트를 사용자 정의하거나 선택한 파일 이름을 표시하려는 경우 몇 가지 문제에 직면할 수 있습니다.

Bootstrap 4.1 이상에서 자리 표시자 변경

Bootstrap 4.1부터 자리 표시자 텍스트는 custom-file-label 요소에 있습니다. CSS:

.custom-file-label::after {
  content: "Select file...";
}

파일 버튼 텍스트 조정

Bootstrap 4.1은 파일 버튼 텍스트를 변경하는 간단한 방법을 제공하지 않습니다. 이를 달성하려면 몇 가지 사용자 정의 스타일을 추가하는 것을 고려하십시오:

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

Bootstrap 4.4에서 선택한 파일 이름 표시

Bootstrap 4.4에서는 일반 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
})

부트스트랩 4.1 이전 옵션:

초기 자리 표시자 숨기기:

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

선택한 파일 이름 표시:

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

이러한 접근 방식은 Bootstrap 4의 파일 입력 구성 요소를 사용자 정의하는 유연성을 제공하므로 이를 특정 요구 사항에 맞게 조정할 수 있습니다.