웹 프로그래밍

전공 과목/웹 프로그래밍

웹 프로그래밍 - DOM-2

CheonD 2020. 9. 17. 14:59

웹 프로그래밍 - DOM-2

오늘은 DOM의 기본개념인 file태그의 사용을 알아볼 것이다.

file태그는 파일 선택이라는 버튼을 띄워주며 실제로 파일을 선택할 수 있게 해주는 태그이다.

파일을 찾으면 파일의 이름과 타입, 크기까지 나오게하는 프로그램을 작성해보자.

출력값:

소스 코드

<!DOCTYPE html>
<html>
<head>
<script>
function myfun() {
	var f = document.getElementById("file").files[0];
	var type = f.type;
	var name = f.name;
	var size = f.size;

	document.getElementById("irum").innerHTML = name;
	document.getElementById("size").innerHTML = size;
	document.getElementById("type").innerHTML = type;
}

</script>
</head>

<body>
	<form method = "get" name = "form1" action = "">
<input type = "file" id = "file" name = "file" onChange = "myfun()">
<p><b><font size = 5 color = blue>선택된 파일 정보</font></b></p>

파일 이름 : <span id = "irum"></span><br>
파일 크기 : <span id = "size"></span><br>
파일 타입 : <span id = "type"></span><br>
</body>
</html>

여기서 file아이디를 접근한 후 뒤에 files[0]의 뜻은 첫번째 파일을 가져온다는 뜻이다. [0]가 배열에서의 첫번쨰를 의미하기 때문이다.

저작자표시