Bootstrap 4 파일 입력에서 \'파일 선택...\' 텍스트를 변경하는 방법은 무엇입니까?

Bootstrap 4 파일 입력: '파일 선택' 사용자 정의...

Bootstrap 4의 사용자 정의 파일 입력에는 자리 표시자 텍스트 "파일 선택"이 있습니다. ..." 이는 변경하기 까다로울 수 있습니다. 두 가지 개별 문제를 살펴보겠습니다.

1. 초기 자리 표시자 및 버튼 텍스트 수정

Bootstrap 4는 HTML 언어를 기반으로 하는 CSS 의사 요소를 통해 초기 자리 표시자와 버튼 텍스트를 설정합니다. 이러한 값을 재정의하려면 사용자 정의 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>

2. 선택한 파일 이름 표시

선택한 파일 이름을 얻으려면 JavaScript/jQuery를 사용하세요.

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

그러나 입력의 자리 표시자 텍스트를 직접 조작하는 것은 불가능합니다. 대신 다른 CSS 클래스를 사용하여 파일이 선택되면 초기 자리 표시자를 숨기고 근처 요소에 파일 이름을 표시합니다.

<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 4 파일 입력에서 \'파일 선택...\' 텍스트를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!