>

자바 스크립트를 처음 접했고 파일을 선택한 후 파일 이름을 표시하도록 사용자 정의 된 파일 업로드 버튼의 레이블을 변경하는 데 문제가 있습니다.

이 단계 .

버튼이 올바르게 표시되고 파일이 업로드되었지만 업로드 된 파일 이름을 버튼에 표시하도록 JS를 작동시킬 수 없습니다.

var inputs = document.querySelectorAll('.wpcf7-file');
Array.prototype.forEach.call(inputs, function(input) {
  input.addEventListener('change', function(e) {
    var label = document.querySelectorAll('.custom-file-button');
    var fileName = '';
    fileName = e.target.value.split('\\').pop();
    if (fileName) {
      label.innerHTML = fileName;
    } else
      label.innerHTML = labelVal;
  });
});

label.custom-file-button {
  position: relative;
}
label.custom-file-button:before {
  content: "
  • 답변 # 1

    .querySelectorAll()   NodeList 를 반환 단일 요소가 아닙니다. 치환 된 .closest()   .querySelectorAll() 를 위해  가장 가까운 조상 <label> 를 선택하려면  현재 <input type="file"> 의 요소  요소. <input type="file"> 이후  요소는 <label> 의 자식입니다   .innerHTML 설정  파일 이름으로 <input type="file"> 를 덮어 씁니다.  요소. CSS에 <span> 가 표시되지 않습니다   <label> 의 첫 번째 자식 인 요소 , <span> 를 추가했습니다  파일 이름을 .nextElementSibling 로 표시  와이즈 비츠  요소. <label> 를 사용할 수 있습니다  파일 이름을 가져옵니다.

    e.target.files[0].name
    
    
    var inputs = document.querySelectorAll('.wpcf7-file');
    Array.prototype.forEach.call(inputs, function(input) {
      input.addEventListener('change', function(e) {
        var label = e.target.closest('.custom-file-button');
        label.nextElementSibling.innerHTML = e.target.files[0].name;
      });
    });
    
    label.custom-file-button {
      position: relative;
    }
    label.custom-file-button:before {
      content: "
    

관련 자료

  • 이전 ASPnet 핵심 단위 테스트 프로젝트에서 세션 변수를 조롱하는 방법?
  • 다음 c# - Docker에서 실행되는 net 핵심 앱에서 SQL Server Express에 연결할 수 없습니다