[Javascript] FileReader 객체로 파일 읽기

FlieReader 객체를 이용하여 업로드된 파일을 읽을 수 있다.

 

FileReader란?

웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File혹은 Blob객체를 이용해 

파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 한다.

 

File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList객체, 드래그 앤 드랍으로 

반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻는다.

https://developer.mozilla.org/ko/docs/Web/API/FileReader

 

<input type="file" onchange="readFile(this, console.log)">  
<script type="text/javascript"> 
	function readFile(FILE_ELEMENT, CALLBACK){ 	
		const READER = new FileReader(); 	 	
		READER.onload = function () { 		
			CALLBACK(READER.result); 	
		} 	 	
		READER.readAsText(FILE_ELEMENT.files[0], "EUC-KR"); 
	} 
</script> 

 

1. FileReader.onload()

load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료되었을 때마다 발생한다.

비동기이므로 원하는 동작을 위해 CALLBACK 함수를 이용하는 것이 좋다.

https://developer.mozilla.org/ko/docs/Web/API/FileReader/onload

 

2. FileReader.readAsText(FILE, ENCODING)

파라미터 : 1. 읽을 객체, 2. 인코딩

특정 파일, Blob객체를 텍스트로 읽기 시작하며 두번째 파라미터로 읽을 때 사용되는 인코딩을 지정할 수 있다.

https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsText

 

동작 순서는 FileReader.readAsText()메소드로 읽기를 시작하여 내용을 다 읽은 후에 

FileReader.onload()메소드를 수행하는 구조이므로 위에서 언급한 것처럼 비동기로 수행되기 때문에 주의를 요한다.