분류 design

클라이언트측에서 첨부파일을 이미지로 제한하고자 할 때

컨텐츠 정보

  • 조회 469 (작성일 )

본문

폼양식 첨부파일로 올릴 때 이미지로 제한하는 방법입니다.

서버측에서 제한을 할 수 있지만 클라이언트측에서 제한을 하는 것이 훨씬 리소스를 줄일 수 있습니다.

 

1. 'accept'속성을 추가합니다.

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

 

2. 특정 이미지 형식만 원하는 경우 다음과 같이 타입을 추가합니다.

<input type="file" name="myImg" accept="image/x-png,image/jpeg,image/gif" />

 

이 필터기능은 아주 유용하지만 유감스럽게도 ms edge는 지원하지 않습니다.

https://caniuse.com/#feat=input-file-accept

에서 브라우저별 지원 상황을 확인할 수 있습니다.