다른 사람 질문글에 답변했던 내용인데 나중에 따로 찾는 사람 있을거 같아서 별도 아티클로 뽑아둠
공부할겸 해서 예제 코드 작성한건데 재밌네
input file 태그로 파일을 선택하고 선택한 파일을 file reader api를 사용해서 로드해서
내용을 출력하는 내용임.
바디만 붙여서 html 파일로 저장해서 쓸 수 있도록 해둠
<body>
<h1>file reader를 사용한 파일읽기 예제</h1>
<div id="fileContentView"
style="padding: 10px; width: 500px; height: 500px; overflow-y: scroll; border: 1px solid black;">
</div>
<form>
<label>파일 선택:
<!-- accept 속성으로 읽을 파일 속성만 선택 가능, 예제는 text/plain으로 설정 -->
<!-- 예제에서는 파일 하나만 처리, 여러개를 처리하려면 multiple 속성 사용필요 -->
<input id="fileSelector" type="file" accept="text/plain">
</label>
</form>
<script>
// 브라우저가 HTML 문서를 완전히 파싱했을 경우 발생하는 이벤트
document.addEventListener('DOMContentLoaded', () => {
// id fileSelector(input[type='file'])를 사용하는 엘리먼트 가져옴
const fileSelector = document.getElementById('fileSelector');
const fileContentView = document.getElementById('fileContentView');
const fileContentViewText = '이 안에 파일 내용이 출력되빈다.';
// 참조: https://developer.mozilla.org/ko/docs/Web/API/FileReader
const fileReader = new FileReader();
// 기본적으로 표시할 내용 설정
fileContentView.innerHTML = fileContentViewText;
/**
* 파일 reader 객체의 이벤트 설정
* loadend 이벤트는 파일을 전부 읽었을 경우에 발생하는 이벤트.
*
* event: 이벤트 객체, 이벤트에 대한 정보가 저장되어 있음
* event.target: 이벤트 발생 대상, 이 경우 파일 내용.
*/
fileReader.addEventListener('loadend', (event) => {
// target.result에 읽은 내용이 저장되어 있음.
const readedData = event.target.result;
fileContentView.innerHTML = readedData;
});
/**
* 파일 선택시 'change' 이벤트 핸들러 발생.
* 핸들러에 전달 된 이벤트의 target은 input[type=file] 태그를 가리킴.
* input[type=file] 엘리먼트의 file 속성은 선택한 파일들을 FileList로 반환함.
* 리스트라고해서 아마 배열을 생각할 수 있겠지만.
* 배열이 아니라 객체형태로 되어있는 유사배열임을 유의, 근데 이 예제에선 신경 쓸 일은 없음.
*
* 예제에서는 파일 하나만 처리할 것이므로 바로 0번 속성을 가져옴
* event: 이벤트 객체, 이벤트에 대한 정보가 저장되어 있음
* event.target: 이벤트가 발생한 요소(=태그)
*/
fileSelector.addEventListener('change', (event) => {
const file = event.target.files[0];
// 참조: https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsText
// FileList에서 가져온 File타입 객체를 fileReader로 전달
// readAsText는 텍스트 파일을 읽을 때 사용.
fileReader.readAsText(file, 'utf-8');
});
});
</script>
</body>
