Bootstrap 4 파일 입력 레이블을 동적으로 업데이트하는 방법은 무엇입니까?

Bootstrap 4 Bootbox 시작하기

도전 과제 이해

Bootstrap 4에서 사용자 정의 파일 입력 구성 요소는 파일 선택에 관계없이 지속적인 "파일 선택" 레이블. 선택한 파일 이름으로 이 레이블을 동적으로 업데이트하려면 JavaScript 및 CSS 조작에 대한 이해가 필수적입니다.

Bootstrap 4 파일 입력 솔루션

버전 4.5 이상:

• 사용자 정의 파일 입력을 더 이상 사용할 수 없습니다. 파일 버튼 텍스트를 사용자 정의하려면 CSS 또는 JavaScript를 사용해야 합니다.

버전 4.1 이상:

• 자리 표시자 텍스트는 사용자 정의에 있습니다. -file-label 요소.

• CSS를 통해 사용자 정의 레이블 텍스트 설정:

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

Bootstrap 4.1 이상에 대한 대안:

• 다음과 같은 사용자 정의 파일 입력 플러그인을 활용하세요: https://www.codeply.com/go/uGJOpHUd8L/file-input

원본 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/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>

• CSS 전환 클래스를 선택하고 파일 이름을 양식 제어 파일 범위에 삽입합니다.

  <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!