본문 바로가기

HTML5/Input filename

get file name from <input type=file >

HTML 폼의 파일 박스로부터 파일이름 구하는 예


파일선택 박스에서 파일선택시에 발생하는 onchange 이벤트 핸들러함수를 활용하면 선택된 파일 이름을 구할 수 있다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일박스에서 파일이름 구하기</title>
<script>
function onChange(evt) {
	
  var f = document.getElementById("uploadInput").files[0];

  var fileSize = f.size;
  var fileName = f.name;
  var fileType = f.type;

  document.getElementById("fileName").innerHTML = fileName;
  document.getElementById("fileSize").innerHTML = fileSize;
  document.getElementById("fileType").innerHTML= fileType
}
</script>
</head>
<body><p>
<form name="uploadForm">
<input id="uploadInput" type="file" name="myFiles" onchange="onChange();" multiple> <p>
<input type="submit" value="Send file"><p>
</form><p>
선택된 파일 정보<p>
파일 이름: <span id="fileName"></span><br>
파일 크기: <span id="fileSize"></span><br>
파일 타입: <span id="fileType"></span><br>
</body>
</html>