[HTML]파일 첨부시 확장자 지정하는 방법

웹을 개발하다 보면 파일 업로드를 진행 할 때가 있습니다. 파일을 업로드를 하기 위해 이용 하는 것이 바로 <input type=”file”> 태그입니다. 해당 태그를 사용하면 자동으로 웹페이지에서 파일 선택을 할 수 있도록 지원 해줍니다.

그런데 설정 없이 디폴트로 <input type=”file”>태그를 사용 하면 모든 확장자에 대해서 파일 선택이 가능 해 지게 됩니다. 특정 확장자만 가지고 파일 처리를 해야 하는 경우 예외 처리를 일일히 하기 힘든데, 이럴때 유용하게 사용 하는 것이 바로 accept 속성 입니다.

사용방법은 input 태그에 accept 속성만 추가 해준후 속성의 값에 사용 할 수 있는 특정 확장자를 지정하거나 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식으로 파일 확장자를 지정 할 수 있습니다. 

파일 확장자는 콤마 구분자로 여러개를 동시에 설정 하는 것도 가능 합니다.

<input type="file" accept=".gif, .jpg, .png">

audio/*으로 설정 하는 경우  모든 오디오 파일을 선택 할 수 있도록 해줍니다.
video/* 으로 설정 하는 경우  모든 비디오 파일을 선택 할 수 있도록 해줍니다.
image/*으로 설정 하는 경우  모든 이미지 파일을 선택 할 수 있도록 해줍니다.

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

accep 속성에 설정 가능한 여러 파일 타입은 아래의 URL에서 확인 할 수 있습니다. 현재 사용되고 있는 파일 확장자의 대부분을 지정 할 수 있습니다.

accep 속성 파일 타입 : http://www.iana.org/assignments/media-types/media-types.xhtml