포스트

Input 파일 타입 제한하기

파일 업로드의 확장자를 제한하는 방법 중 하나로는 HTML에서 부터 확장자를 제한하는 방법이 있습니다.

여기서 특정한 확장자를 지정해서 사용하는 경우도 있고, 때로는 특정 유형의 타입을 받는 경우도 있습니다.

그때 사용하는 확장자 정보는 IANA 에서 정한 MIME 타입을 기준으로 사용할 수 있습니다.

링크 : https://www.iana.org/assignments/media-types/media-types.xhtml

위의 링크에서는 다양한 미디어 타입의 종류를 확인할 수 있으며 아래와 같이 사용할 수 있습니다.

  1. 특정 미디어 타입 유형 전체를 허용하는 방법
1
2
3
4
5
<input type="file" accept="image/*">

<input type="file" accept="audio/*">

<input type="file" accept="video/*">
  1. 특정 미디어 타입만을 허용 하는 방법
1
2
3
<input type="file" accept="image/jpeg">

<input type="file" accept="image/png">
  1. 특정 확장자만을 허용하는 방법
1
<input type="file" accept=".jpg, .jpeg, .png">

다만 HTML에서 accept 속성을 사용하는 방법과 같이 클라이언트 측에서 검증하는 방법은 신뢰할 수 없는 정보이기 때문에 서버에서도 데이터의 타입을 확인할 필요가 있습니다.


IANA?
  • IANA(Internet Assigned Numbers Authority)는 인터넷 할당 번호 관리기관의 약자
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.