자바스크립트 파일 정보 읽기 input type file

자바스크립트의 file 속성은 파일 객체는 파일을 읽는 용도로 사용한다. 파일 정보는 배열로 표현되고 점을 이용하여 파일 속성에 접근할 수 있다. input 입력 태그에서 선택한 파일의 정보를 file 속성를 사용하여 정보를 읽을 수 있고, 자바스크립트를 이용하여 화면에 파일 정보를 표시할 수 있다.

자바스크립트 파일 정보 읽기
input type file

자바스크립트는 웹페이지에서 동적인 역할을 한다.

웹브라우저에서 실행되는 클라이언트 프론트엔드 언어지만 과거에 비해 여러가지가 가능하다.

자바스크립트도 엄연히 언어에 속하며 왠만한 기능들은 가지고 있다.

그 중 하나가 파일읽기이다.

파일읽기는 input 입력 태그를 이용해 서버로 전송하기도 하고, 화면에 텍스트나 이미지를 표현할 수 있다.

자바스크립트의 file 속성 이용하면 파일의 정보를 읽어올 수도 있다.

파일정보 읽기

웹브라우저에서 자바스크립트를 이용하여 파일의 정보를 읽어올 때 html 에서는 input 입력 태그를 사용하고 자바스크립트에서는 file 속성을 사용한다.

input 입력 태그에서 파일을 선택하고, 등록된 onchange 이벤트를 이용하여 file 속성을 이용하여 파일 정보를 읽어올 수 있다.

아래는 웹브라우저에서 파일의 정보를 읽는 방법을 나타낸다.

html 구성하기 input 입력태그 사용
파일정보 읽기
화면에 출력하기

html 구성하기

웹브라우저에서 파일을 선택하기 위한 input 입력 태그를 작성한다.

파일을 불러오기 위해 input 입력태그의 type 속성을 file 로 지정하도록 한다.

그리고, onchange 이벤트를 등록하여 input 입력 태그의 값이 변경되면 발생하도록 한다.

파일을 선택한 후 파일정보를 출력하기 위한 문단 태그인 p 태그를 작성한다.

<div>
	<input type="file" onchange="return previewFile();" /><br />
</div>
<hr/>
<div>
	<h4>파일정보</h4>
	<p id="dspLastModified"></p>
	<p id="dspLastModifiedDate"></p>
	<p id="dspName"></p>
	<p id="dspSize"></p>
	<p id="dspType"></p>
</div>

파일정보 읽기

파일을 선택하면 onchange 이벤트가 발생하고 이벤트에 등록한 함수가 실행될 것이다.

함수에는 선택자를 통해 파일 정보를 읽어오도록 한다.

파일의 정보를 콘솔로 출력하면 배열의 형태로 보여주는 것을 알 수 있다.

var fileInfo = document.querySelector('input[type=file]').files;
console.log(fileInfo);

화면에 출력하기

파일의 정보를 읽었다면 화면에 출력하여 정보를 볼 수 있도록 할 수 있다.

위의 이미지와 같이 파일의 정보는 배열의 형태를 가지고 있으며 수정일, 파일명, 크기, 파일형태을 가지고 있다.

배열의 첫번째 요소를 기준으로 파일속성에 점으로 접근하여 정보를 얻을 수 있다.

위에서 구성한 html 의 p 태그에 표시하기 위해 jquery 를 사용하고 선택자를 사용하여 값을 출력한다.

여기서 조건문을 사용한 것은 파일의 정보가 있을 때만 출력하도록 한 것이다.

var file = fileInfo[0];
if (file) {
	console.log(file.lastModified);
	console.log(file.lastModifiedDate);
	console.log(file.name);
	console.log(file.size);
	console.log(file.type);

	$("#dspLastModified").text(file.lastModified);
	$("#dspLastModifiedDate").text(file.lastModifiedDate);
	$("#dspName").text(file.name);
	$("#dspSize").text(file.size);
	$("#dspType").text(file.type);
}

전체코드 및 결과화면

파일의 정보를 읽는 과정을 다시 언급하면 다음과 같다.

파일을 불러오기 위해 input 입력 태그를 사용하고 type 속성을 file 로 지정하고 onchange 이벤트를 지정한다.

input 입력 태그에 파일이 입력되면 onchange 이벤트에 등록된 함수가 호출된다.

파일의 정보를 화면에서 볼 수 있도록 화면에 출력하도록 한다.

위의 과정에 대한 전체 코드와 결과화면은 다음과 같다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>자바스크립트 파일 정보 읽기</title>
	</head>
	<body>
		<div>
			<input type="file" onchange="return previewFile();" /><br />
		</div>
		<hr/>
		<div>
			<h4>파일정보</h4>
			<p id="dspLastModified"></p>
			<p id="dspLastModifiedDate"></p>
			<p id="dspName"></p>
			<p id="dspSize"></p>
			<p id="dspType"></p>
		</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		function previewFile() {
			var fileInfo = document.querySelector('input[type=file]').files;
			console.log(fileInfo);

			var file = fileInfo[0];
			if (file) {
				console.log(file.lastModified);
				console.log(file.lastModifiedDate);
				console.log(file.name);
				console.log(file.size);
				console.log(file.type);

				$("#dspLastModified").text(file.lastModified);
				$("#dspLastModifiedDate").text(file.lastModifiedDate);
				$("#dspName").text(file.name);
				$("#dspSize").text(file.size);
				$("#dspType").text(file.type);
			}
		}
	</script>
</html>

자바스크립트의 file 속성을 사용하여 파일의 정보를 화면에 표시한 결과는 다음과 같다.

자바스크립트만을 사용했기 때문에 뭔가 아쉬운 감이 있다. 파일 관련 라이브러리를 사용하면 더 많은 정보를 얻을 수 있는데 이 부분은 나중으로 미뤄본다.

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바스크립트 화살표 함수 사용법 3가지 인자값과 리턴값 (0)	2023.01.28
자바스크립트 화살표 함수 뜻과 의미 = () => arrow function (0)	2023.01.28
자바 스프링 url 파라미터 json 객체로 변환하기 (0)	2023.01.10
자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기 jquery serialize 메서드 사용 (0)	2023.01.09
자바 스프링 데이터 전송값 모두 확인하는 방법 (0)	2023.01.06

자바스크립트 파일 정보 읽기 input type file