FileReader 예제

HTML5 FileReader API를 사용하면 로컬에 있는 파일을 읽을 수 있다.

by Jaeha Ahn

HTML

<pre id="preview">텍스트 파일 내용 출력 영역</pre>
<input type="file" id="getfile" accept="text/*">

CSS

pre {
    padding: 1em;
    background: rgb(240, 240, 240);
    color: rgb(0, 0, 0);
    border-radius: .5em;
}

JavaScript

var file = document.querySelector('#getfile');

file.onchange = function () { 
    var fileList = file.files ;
    
    // 읽기
    var reader = new FileReader();
    reader.readAsText(fileList [0]);

    //로드 한 후
    reader.onload = function  () {
        document.querySelector('#preview').textContent = reader.result ;
    }; 
};