<input type="file">에서 허용 파일 제한 accept 속성

개요

웹페이지에서 업로드 가능한 파일 유형을 제한해야 하는 경우가 있습니다.(이미지 파일만 업로드 가능하다던가, pdf 파일만 업로드 가능한 경우 등등.)

javascript를 통해 선택된 파일을 직접 검증하는 것도 가능하지만, accept 속성을 이용하여 애초에 선택 가능한 유형을 허용하는 파일로만 제한할 수도 있습니다.

예제코드

<input type="file" />에서 허용 파일 제한 accept 속성을 추가하기만 하면 됩니다. 아래에서는 pdf 파일만 허용하도록 설정했습니다.

<form id="fileupload" method="POST" enctype="multipart/form-data">
	<table>
		<tr>
			<th>요청서 업로드</th>
			<td colspan="3"><input type="file" accept=".pdf,application/pdf" /></td>
		</tr>
	</table>
</form>

위에서 pdf 파일만 허용하도록 설정했기 때문에, pdf 파일만 목록에 나타납니다.

accept가 없으면 모든 파일이 나타납니다.

해설

accept에는 파일확장자와 MIME 유형 문자열을 입력하여 허용할 파일을 지정할 수 있습니다. 각각은 콤마(,)로 구분합니다.

(하단 [참고자료] 항목 참고.)

주의점

불행히도 파일 선택창의 드롭다운리스트에서 ‘모든 파일 (*.*)’을 선택하면 다른 파일도 선택 가능합니다. 때문에 자바스크립트로 추가 검증이 필요합니다.

(하단 [참고자료] 항목 참고.)

참고자료

• <input type="file"> : accept 설명.
• [HTML] input='file' 파일 확장자 제한하기 : accept의 한계와 onChange를 사용하라는 설명.
• 파일 첨부 작업할 땐 accept를 신뢰하지 말것 : onChange용 참고 코드.

 

-끝-