HTML Input File 크기 체크 하기

파일 업로드 기능을 개발한 경험들은 많을 것 이다. 보통 서버에서 파일 크기 확인을 해서, 실패 응답을 내려주기도 했지만, 요청 전에 직접 확인이 가능 하다.

<input type="file" name="sample" />

정보를 직접 확인 해보자.

$(document).on('change', 'input[type=file]', function() {
    console.log($(this)[0].files[0].size);
    console.log($(this)[0].files[0].name);
});

기본 객체가 Array 로 되어 있어 확인하기 까지 시간을 많이 소비 했다. 평소에 연락을 자주 하고 지내는 전산실 공장장 지단로보트님이 방법을 알려주셨다. Script 에 위 내용을 추가 하고 파일을 업로드 해보자. 확인이 가능 할 것이다.