[html] input 파일 첨부시 파일 확장자 제한하기

input 태그로 파일을 첨부하게 할 수 있는데 예상치 못한 이슈가 생겼습니다. 사용자의 사진을 첨부받을 목적으로 만들었는데 엑셀, 텍스트 파일, 비디오 파일 등 예상치못한 파일을 첨부하는 일이 발생했습니다. 다행히도 input 의 accept속성을 통해서 확장자를 제한할 수 있었습니다. 여러 개의 확장자를 원할 경우 , 로 연결해주면 됩니다.

<input type="file" accept="원하는 확장자" />

 

자주 사용하는 확장자에 대해서 정리를 해보았습니다.

Excel Files (.xls)

<input type="file" accept="application/vnd.ms-excel" />

 

Excel Files (.xlsx)

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

 

Text Files (.txt)

<input type="file" accept="text/plain" />

 

Image Files (.png/.jpg/etc)

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

 

HTML Files (.htm,.html)

<input type="file" accept="text/html" />

 

Video Files (.avi, .mpg, .mpeg, .mp4)

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

 

Audio Files (.mp3, .wav, etc)

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

 

PDF Files

<input type="file" accept=".pdf" />

 

본인이 사용하고 싶은 확장자를 확인하고 싶으면 여기 에서 확인할 수 있습니다.