[HTML] <input> 태그의 accept 속성

<input> 태그의 accept 속성

<input> 태그의 accept 속성은 서버로 업로드할 수 있는 파일의 타입을 명시합니다.

 

accept 속성에 하나 이상의 속성값을 명시할 경우에는 콤마(,)를 사용하여 구분합니다.

이러한 accept 속성을 유효성 검사를 도구로 사용해서는 안 되며, 업로드된 파일은 서버에서 검증되어야 합니다.

 

이 속성은 <input> 요소의 type 속성값이 “file”인 경우에만 사용할 수 있습니다.

<input type="file" accept="파일 확장자|audio/*|video/*|image/*|미디어 타입">

 

[예시] 아래에서 파일선택 버튼을  눌러 파일을 고르게 될 때, 이미지 파일만 보이는 것을 확인 할 수있습니다.

<label for="avatar">Choose a profile picture:</label>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

 

속성값

파일 확장자	닷(.)으로 시작되는 파일 확장자 ex) .png, .jpg, .pdf, .hwp
audio/*	모든 타입의 오디오 파일이 허용됨.
video/*	모든 타입의 비디오 파일이 허용됨.
image/*	모든 타입의 이미지 파일이 허용됨.
미디어 타입	매개변수(parameter)를 가지지 않는 유효한 미디어 타입

 

 

출처: http://www.tcpschool.com/html-tag-attrs/input-accept