input file 이미지 미리보기 표시

 

<input type="file" name="thumbnail" accept=".jpg, .jpeg, .png"  />
<img class="img_preview" src="<?=$row['image_path']?>" onerror="handleThumbnailError(this)"/>

1.URL.createObjectURL 이용

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

function handleThumbnail(el){
    var files = el.files;
    var preview = document.querySelector(".img_preview");
    preview.src = URL.createObjectURL(files[0]);
    preview.onLoad = function(){
        URL.revokeObjectURL( preview.src)
    }

   
}

주의점 : 같은 객체를 사용하더라도, createObjectURL()을 매번 호출할 때마다 새로운 객체 URL을 생성합니다. 각각의 URL을 더는 쓰지 않을 땐 URL.revokeObjectURL()을 사용해 하나씩 해제해줘야 합니다. 

2.FileReader 이용

https://developer.mozilla.org/ko/docs/Web/API/FileReader

function handleThumbnail(el){
    var files = el.files;
    var preview = document.querySelector(".img_preview");
    var reader = new FileReader();
    reader.onload = function(){
    preview .src = reader.result;
};
reader.readAsDataURL(files[0]);
}