반응형
<!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>순수 자바스크립트로 텍스트 파일을 읽어들이는 코드 입니다.
반응형
'Development > Javascript' 카테고리의 다른 글
| window.opener 메세지 보내기 (부모창 함수 호출) (0) | 2024.03.23 |
|---|---|
| lodash & underscore 라이브러리 (0) | 2018.10.08 |
| 자바스크립트 오버로딩 (0) | 2017.05.22 |
| [펌] 자바스크립트에서 strict mode를 사용해야 하는 이유 (0) | 2016.03.09 |
| [펌] +function() 의 원리 (0) | 2016.03.09 |
댓글