파일 첨부 시 특정 확장자만 보이게 하기

<input type=”file”> 태그에 accept 라는 속성으로 사용자가 첨부하려는 파일을 특정지을 수 있다.

ex) gif 라는 속성을 주면 파일선택시에 git 파일마 보여지게 한다.

 

사용방법은 input 태그에 accept 속성만 주면되고. 속성의 값으로 사용 할 수 있는 방법은 특정 확장자를 지정하거나 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식의로 정의 할 수 있다.

파일 확장자로 지정하는 것은 .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,(콤마)로 하면된다.

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

audio/* 은 모든 오디오 파일을 보여준다.
video/* 은 모든 비디오 파일을 보여준다.
image/* 은 모든 이미지 파일을 보여준다.
오디오, 비디오, 이미지 파일의 범위는 사용자 PC의 설정에 따르는 듯 하다.

1 2 3

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

마지막으로 미디어 타입으로 지정할 수 있는데
아래와 같이 사용하면 된다.

1	<input type="file" accept="image/gif, image/jpeg, image/png">

미디어 파일 타입은 http://www.iana.org/assignments/media-types/media-types.xhtml 이곳을 참고 하기 바란다.

참고로 해당 속성은 IE10 이상 부터 사용 가능하다. 

http://blog.munilive.com/ex/html/input_type_file_accept_attribute.html 에서 예제를 확인 할 수 있다.

 

출처 : http://blog.munilive.com/input-file-type-accept-attribute/