본문 바로가기

typescript

input type text에 input type file val() 이름 불러오기

아래와 같이 input type이 file 일때 다른 input text에 file 이름 출력할때의 방법이다.

<input class="upload-name" value="파일선택" disabled="disabled">
<label for="filename">찾아보기</label>
<input type="file" id="filename" name="business_license_file" class="upload-hidden">

var fileTarget = $('.upload-hidden');

fileTarget.on('change', function() {
  if (window.FileReader){
    // 최신 브라우저
    var filename = (<HTMLInputElement>$(this)[0]).files[0].name;
  }
  else {
    // 예전 브라우저
    var filename = $(this).val().toString().split('/').pop().split('\\').pop();
  }

  $(this).siblings('.upload-name').val(filename);
});

기존 javascript에서는 (<HTMLInputElement>$(this)[0])를 제외하고 사용가능하다.

Property 'files' does not exist on type 'HTMLElement'. Error

에러 나는 구문 앞에 ()를 붙여주자

'typescript' 카테고리의 다른 글

window 객체  (0) 2021.03.13
Property 'split' does not exist on type 'string | number | string[]'. Error  (0) 2021.03.13
$(this) 란?  (0) 2021.03.13
sibling 요소  (0) 2021.03.13
replace 정규표현식  (0) 2021.03.13