HTML DOM의 입력 FileUpload 객체는 HTML 문서에서 type="file" 속성을 가진 <input> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트만으로 파일 업로드 버튼을 동적으로 생성하고 제어할 수 있습니다.
그럼 FileUpload 객체를 생성하는 방법부터 살펴보겠습니다.
문법
FileUpload 객체를 생성하는 기본 문법은 다음과 같습니다.
var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type","file");주요 속성
HTML DOM 입력 FileUpload 객체가 제공하는 주요 속성은 아래 표와 같습니다.
| 속성 | 설명 |
|---|---|
| accept | 파일 업로드 버튼의 accept 속성 값을 반환하거나 수정합니다. |
| autofocus | 페이지 로드 시 해당 파일 업로드 버튼이 자동으로 포커스를 받을지 여부를 반환하거나 설정합니다. |
| disabled | 파일 업로드 버튼의 비활성화 상태(기본 설정)를 반환하거나 수정합니다. |
| defaultValue | 파일 업로드 버튼의 기본값을 반환하거나 수정합니다. |
| files | 파일 업로드 버튼을 통해 선택된 모든 파일을 담고 있는 FileList 객체를 반환합니다. |
| forms | 해당 파일 업로드 입력 버튼을 감싸고 있는 form 요소의 참조를 반환합니다. |
| multiple | 사용자가 여러 개의 파일을 선택할 수 있는지 여부를 반환하거나 설정합니다. |
| name | 파일 업로드 버튼의 name 속성 값을 반환하거나 수정합니다. |
| required | 파일 업로드 버튼의 required 속성 값을 반환하거나 수정합니다. |
| type | 파일 업로드 버튼의 type 속성 값을 반환하거나 수정합니다. |
| value | 파일 업로드 버튼의 value 속성 내용을 반환하거나 수정합니다. |
예제
다음은 HTML DOM 입력 FileUpload 객체를 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
</style>
</head>
<body>
<h1>DOM FileUpload 객체 예제</h1>
<button onclick="createFileBtn()" class="btn">클릭하여 파일 업로드 버튼 만들기</button>
<script>
function createFileBtn() {
var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");
document.body.appendChild(fileUploadBtn);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
파란색 버튼을 클릭하면 새로운 파일 업로드 버튼이 동적으로 생성됩니다.
