웹 프로그래밍

웹 프로그래밍 - DOM-2

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]가 배열에서의 첫번쨰를 의미하기 때문이다.

저작자표시

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

웹 프로그래밍 - 폼(실습) (0)	2020.09.17
웹 프로그래밍 - dom (0)	2020.09.17
웹 프로그래밍 - form의 응용 (0)	2020.09.17
웹 프로그래밍 - form (0)	2020.09.17
웹 프로그래밍- 팩토리얼, 과자 구매하기 (0)	2020.09.05

CS 기록장 💻

CS 기록장 💻

태그

최근글

댓글

공지사항

아카이브

웹 프로그래밍 - DOM-2

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

관련글

티스토리툴바