Development/Javascript

자바스크립트에서 텍스트 파일 읽기

Dev. Jkun 2022. 9. 21. 16:11
반응형
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<input type="file" name="exFile" id="exFile">
        <input type="file" name="exFile2" id="exFile2" onchange="getTextFileContent(this.files[0])">
        <hr>
        <div id="textContent"></div>
        <div id="textContent2"></div>        
    </body>
    <script type="text/javascript">
    	// FileReader
    	let exFile = document.getElementById('exFile'),
        	textContent = document.getElementById('textContent');
            
        exFile.addEventListener('change', () => {
        	let fr = new FileReader();
            fr.onload = () => {
            	textContent.textContent = fr.result;
            };
            fr.readAsText(this.files[0]);
        });
        
        // Async/Await
    	let textContent2 = document.getElementById('textContent2');
    	async function getTextFileContent(file){
			let t = await file.text();
			textContent2.textContent = t;            
    	}
    </script>
</html>

순수 자바스크립트로 텍스트 파일을 읽어들이는 코드 입니다.

 

반응형