[ java script ] FileReader

File Reader 사용법

 

 

<input type="file" id="getfile" accept="text/*">
<pre id="preview">텍스트 파일 내용 출력 영역</pre>
<script type="text/javascript">
    var file = document.querySelector('#getfile'); //querySelector함수를 통해 id getfile이라는 input태그 object를 var에 저장
    console.log(typeof(file));

    file.onchange = function () { //onchange는 input태그에서 file이 선택되었을때 발동하며 이에 대한 function 정의
        var fileList = file.files ; //input태그의 파일들을 fileList에 담는다.

        // 읽기
        var reader = new FileReader();
        reader.readAsText(fileList [0]); //reader객체의 readAsText함수를 통해 fileList의 값을 읽어온다.

        //로드 한 후
        reader.onload = function  () { // 위에서 파일값을 읽어오면 onload가 발생하고 result값을 preview에 출력한다.
            document.querySelector('#preview').textContent = reader.result ;
    };

};

//document.querySelector함수를 사용하여 id getfile이라는 Input태그를 file에 담는다.