JavaScript File Web API의 file.type 속성은 해당 파일의 미디어 타입(MIME 타입)을 나타내는 읽기 전용 속성입니다. 예를 들어 PNG 이미지 파일이라면 "image/png", PDF 문서라면 "application/pdf"와 같은 문자열이 반환됩니다.
만약 브라우저가 파일의 타입을 판별할 수 없는 경우에는 빈 문자열("")이 반환된다는 점도 함께 기억해 두면 좋습니다.
주요 특징
- 파일 확장자가 아닌 MIME 타입을 반환합니다.
- 타입을 알 수 없으면 빈 문자열(
"")을 반환합니다. - 읽기 전용 속성이므로 값을 직접 변경할 수 없습니다.
예제 코드
다음은 File.type 속성을 사용하여 업로드한 파일의 이름과 타입을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript file.type 속성</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>위의 파일 입력창에서 파일을 선택하면 해당 파일의 타입을 확인할 수 있습니다.</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
resultEle.innerHTML +=
"파일 이름 = " + event.target.files[0].name + "<br>";
resultEle.innerHTML += "파일 타입 = " + event.target.files[0].type;
});
</script>
</body>
</html>실행 결과
페이지를 실행하면 다음과 같이 파일 선택 버튼이 표시됩니다.
「파일 선택(Choose file)」 버튼을 클릭하여 파일을 업로드하면 아래와 같이 파일 이름과 파일 타입이 화면에 출력됩니다.
정리
file.type 속성은 사용자가 업로드한 파일의 형식을 검증할 때 매우 유용하게 활용됩니다. 예를 들어 이미지 파일만 업로드를 허용하고 싶다면, type 값이 image/로 시작하는지 확인하는 방식으로 간단히 구현할 수 있습니다. 다만 클라이언트 측 검증만으로는 보안이 완전하지 않으므로, 서버 측에서도 반드시 파일 타입을 재검증하는 것이 좋습니다.