HTML 태그에서 이미지 파일만 업로드 가능하도록 설정하는 방법

HTML <input> 태그를 사용하여 파일을 업로드할 때, 사용자가 특정 파일 형식만을 선택하도록 제한하고 싶을 때가 있습니다. 특히 이미지 파일만 허용하도록 설정하고자 할 때는 accept 속성을 활용하면 간단하게 제한할 수 있습니다.



1. accept 속성 사용

accept 속성은 특정 파일 형식만을 선택할 수 있도록 지정하는 역할을 합니다. 아래의 예제 코드에서는 모든 이미지 파일 형식을 허용하는 accept=”image/*”를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>이미지 파일 업로드</title>
</head>
<body>

<!-- 이미지 파일만 업로드 가능한 input 태그 -->
<input type="file" accept="image/*">

</body>
</html>




2. 특정 이미지 형식만 허용하기

특정 이미지 형식만을 허용하고자 할 때는 해당 이미지 형식의 MIME 타입을 명시적으로 지정합니다. 예를 들어 JPEG 이미지만을 허용하려면 accept 속성을 다음과 같이 설정합니다.

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




3. 서버 측에서의 검증

클라이언트 측에서의 accept 속성을 사용한 제한은 사용자 경험을 향상시키는 부가적인 조치일 뿐이며, 보안적인 측면에서만 유효합니다. 따라서 실제 서버에 업로드되는 파일은 서버 측에서의 검증을 통해 안전하게 처리되어야 합니다. 서버 측에서는 업로드된 파일의 MIME 타입 등을 체크하여 이미지 파일 여부를 확인할 수 있습니다.

이렇게 설정하면 사용자는 파일 선택 대화상자에서 이미지 파일만을 선택할 수 있게 되며, 서버에서의 추가적인 검증을 통해 보다 안전한 파일 업로드를 구현할 수 있습니다.




Leave a Comment