Bootstrap에서 파일 선택기 표시를 수정하는 방법은 무엇입니까?

Bootstrap 파일 입력: 파일 선택기 표시 수정

Bootstrap 4의 파일 브라우저를 사용할 때 기본 "선택"이 표시되는 문제가 발생할 수 있습니다. 파일..." 텍스트입니다. 이 텍스트는 .custom-file-control 요소에서 CSS를 사용하여 설정되며 JavaScript를 사용하여 수정하기 어려울 수 있습니다.

Bootstrap 5

Bootstrap 5에서는 사용자 정의 파일 입력이 제거되었습니다. 따라서 파일 선택기 표시를 수정하려면 사용자 정의 CSS 또는 JavaScript 기술이 필요합니다.

Bootstrap 4.4

Bootstrap 4.4에서 선택한 파일 이름을 표시하려면 JavaScript를 사용할 수 있습니다.

<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>

Bootstrap 4.1

Bootstrap 4.1 이상에서는 "파일 선택..." 자리 표시자가 .custom-file-label 요소에 설정됩니다.

<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>

CSS를 사용하여 버튼 텍스트를 변경할 수 있습니다.

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

원래 답변(Bootstrap 4 Alpha 6)

초기 자리 표시자를 수정하려면 및 버튼 텍스트의 경우 CSS를 활용할 수 있습니다.

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

선택한 파일 이름을 검색하고 표시를 업데이트하려면 JavaScript를 사용할 수 있습니다.

<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
});</code>

그러나 자리 표시자 텍스트는 의사 요소이므로 JavaScript는 이를 직접 수정할 수 없습니다. 해결 방법은 의사 콘텐츠를 숨기는 CSS 클래스를 추가하고 파일 이름을 .form-control-file 범위에 배치하는 것입니다.

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

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

위 내용은 Bootstrap에서 파일 선택기 표시를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!