2023년 3월 29일 수요일

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]);

}

댓글 없음:

댓글 쓰기