[HTML] input="file" 파일 지정하기

- input="file" 에서 파일 선택 창에서 선택 가능한 확장자 선택하기

<input type="file">

- 일반적으로 input="file" 로 앨리먼트를 생성한 후 파일 추가하기를 누르면 모든 확장자명의 파일이 보여집니다.

하지만 파일 선택 창 오픈 시 특정한 확장자 (.jpg, .xls 등) 만 보여지게 하고 싶다면 아래와 같이 코드를 추가 해 줍니다.

 

<!-- jpg 확장자만 보여지게 할 경우 -->
<input type="file" accept=".jpg"/>

위와같이 input="file" 에 accept 옵션을 추가한 후 파일 선택창에서 보여지게 할 확장자명을 입력해주면 됩니다.

 

- 여려개의 파일 확장자명을 지정 할 경우

<!-- 두개 이상의 확장자명을 지정할 경우 -->

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

- 이미지파일이나 동영상 파일의 경우 여러가지의 확장자명을 가지고 있는데 이럴 경우 위와같이 , 를 사용하여 필요한 옵션 값을 추가 해주면 된다.