파일 첨부시 특정 파일 확장자만 선택하게 하기
본문
파일첨부시 특정 파일확장자만 선택하게 하기
<input type=”file”> 태그에 accept 라는 속성으로 사용자가 첨부하려는 파일을 특정지을 수 있다.
특정 확장자의 파일만 보이는 파일선택 다이얼로그 창 이미지
특정 확장자의 파일만 보이는 파일선택 다이얼로그 창 이미지<이런식으로 gif 이미지만 보이게 할 수 있다는 이야기>
사용방법은 input 태그에 accept 속성만 주면되고. 속성의 값으로 사용 할 수 있는 방법은 특정 확장자를 지정하거나 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식의로 정의 할 수 있다.
파일 확장자로 지정하는 것은 .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,(콤마)로 하면된다.
<input type="file" accept=".gif, .jpg, .png">
audio/* 은 모든 오디오 파일을 보여준다.
video/* 은 모든 비디오 파일을 보여준다.
image/* 은 모든 이미지 파일을 보여준다.
오디오, 비디오, 이미지 파일의 범위는 사용자 PC의 설정에 따르는 듯 하다.
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">
마지막으로 미디어 타입으로 지정할 수 있는데
아래와 같이 사용하면 된다.
<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/
댓글목록 0