HTML DOM의 Input FileUpload accept 속성은 문자열을 반환하며, 이 값은 FileUpload(파일 업로드) 요소의 accept 속성 값을 나타냅니다. 사용자는 이 속성을 읽어오는 것뿐만 아니라 새로운 값을 직접 설정할 수도 있습니다.
accept 속성은 파일 선택 대화상자에서 특정 파일 형식(MIME 타입 또는 확장자)만 표시되도록 필터링하는 역할을 합니다. 예를 들어 image/*로 설정하면 이미지 파일만, audio/*로 설정하면 오디오 파일만 선택할 수 있습니다.
구문
accept 속성의 기본 문법은 다음과 같습니다 −
- 문자열 값 반환하기
inputFileUploadObject.accept
- accept 속성에 새로운 문자열 값 설정하기
inputFileUploadObject.accept = value
예제
Input FileUpload accept 속성의 실제 사용 예시를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<title>Input FileUpload accept</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"]{
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>FileUpload-accept</legend>
<label for="FileSelect">Upload:
<input type="file" id="FileSelect">
</label><br>
<input type="button" onclick="fileAccept('Audio')" value="Audio">
<input type="button" onclick="fileAccept('Image')" value="Image"><br>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputFile = document.getElementById("FileSelect");
divDisplay.textContent = 'All Files Accepted';
function fileAccept(fileType) {
if(fileType === 'Audio'){
inputFile.accept = 'audio/*';
divDisplay.textContent = 'Only '+inputFile.accept+' Files';
} else {
inputFile.accept = 'image/*';
divDisplay.textContent = 'Only '+inputFile.accept+' Files';
}
}
</script>
</body>
</html>위 예제에서는 두 개의 버튼이 있습니다. 'Audio' 버튼을 클릭하면 파일 입력 요소의 accept 속성이 audio/*로 변경되어 오디오 파일만 선택할 수 있게 되고, 'Image' 버튼을 클릭하면 image/*로 변경되어 이미지 파일만 선택할 수 있게 됩니다. 하단의 div 영역에는 현재 적용된 accept 값이 실시간으로 표시됩니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
'Audio' 버튼 클릭 후 −
'Image' 버튼 클릭 후 −
참고: 자주 사용되는 accept 값
실무에서 자주 활용되는 accept 속성 값은 다음과 같습니다.
image/*: 모든 이미지 파일 (JPG, PNG, GIF 등)audio/*: 모든 오디오 파일 (MP3, WAV 등)video/*: 모든 비디오 파일 (MP4, AVI 등).pdf: PDF 문서 파일.doc,.docx: 워드 문서 파일application/json: JSON 파일
여러 형식을 동시에 허용하려면 쉼표로 구분하여 지정할 수 있습니다. 예를 들어 accept="image/png, image/jpeg"처럼 작성하면 PNG와 JPEG 이미지만 선택 가능합니다.