HTML DOM의 FileUpload disabled 속성은 HTML에서 파일 업로드(input type="file") 요소의 disabled 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 파일을 선택할 수 있도록 허용하거나, 반대로 입력 필드를 비활성화하여 상호작용을 차단할 수 있습니다.
문법(Syntax)
FileUpload disabled 속성의 기본 문법은 다음과 같습니다.
1. disabled 값 반환하기
object.disabled
현재 파일 업로드 입력 필드가 비활성화 상태인지 여부를 true 또는 false 값으로 반환합니다.
2. disabled 값 설정하기
object.disabled = true|false;
true를 설정하면 입력 필드가 비활성화되고, false를 설정하면 다시 활성화됩니다.
예제(Example)
다음은 HTML FileUpload disabled 속성을 실제로 활용한 예제입니다. 버튼을 클릭할 때마다 파일 선택 입력 필드가 활성화 또는 비활성화되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#397367;
color:#fff;
padding:10px;
}
p{
font-size:1.2rem;
}
input{
width:200px;
border:none;
margin:10px 0;
}
.btn{
display:block;
margin:10px 0;
background-color:#22223B;
color:#fff;
border:none;
height:30px;
border-radius:50px;
font-weight:bold;
padding:0.5rem 1rem;
cursor:pointer;
outline:none;
}
</style>
</head>
<body>
<h1>FileUpload disabled 속성 예제</h1>
<p>파일을 선택할 수 있나요?</p>
<input type="file">
<button onclick="enableDis()" class='btn'>파일 선택 활성화/비활성화</button>
<script>
function enableDis() {
var chooseFileBtn = document.querySelector("input");
if(chooseFileBtn.disabled === true){
chooseFileBtn.disabled = false;
} else {
chooseFileBtn.disabled = true;
}
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
초기 상태에서는 파일 선택 입력 필드가 활성화되어 있어 사용자가 자유롭게 파일을 선택할 수 있습니다.
이제 “파일 선택 활성화/비활성화” 버튼을 클릭해 보세요. 클릭할 때마다 파일 업로드(input type="file") 입력 필드가 비활성화되거나 다시 활성화되는 것을 확인할 수 있습니다.
정리
FileUpload disabled 속성은 조건에 따라 사용자의 파일 업로드 권한을 동적으로 제어해야 하는 경우 매우 유용합니다. 예를 들어, 폼의 다른 필수 항목이 완료되기 전까지 파일 업로드를 막거나, 관리자 권한에 따라 업로드 기능을 제한하는 등의 시나리오에서 활용할 수 있습니다.