FileReader 예제 (이미지)

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

by Jaeha Ahn

HTML

<h3>로컬에 있는 이미지를 바로 브라우저에 표시</h3>
<img id="preview" src="" width="700" alt="로컬에 있는 이미지가 보여지는 영역">
<input type="file" id="getfile" accept="image/*">

CSS

img {
    margin: 1em 0;
    display: block;
    background: rgb(240, 240, 240);
    border: 1px solid rgb(0,0,0);
}

JavaScript

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

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

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