[javascript/jquery] javascript image preview example / 자바스크립트 이미지 미리보기 예제

[javascript/jquery] javascript image preview example / 자바스크립트 이미지 미리보기 예제

 

 

javascript 에서

 

서버에 이미지를 업로드 하기 전에

 

미리보기를 구현하고 싶은 경우가 있습니다!

 

그럴때는 아래와 같이 

 

FileReader 를 이용하시면 됩니다.

 

 

우선 아래와 같이

 

input 태그과 img 태그가 있다고 가정하고,

<input type="file" id="uploadImgUser" name="uploadImgUser" onchange="prev_img(this)"/>

<img src="" id="id_img_preview"/>

 

아래 스크립트를 그대로 붙여서 구현하시면 됩니다.

    function prev_img(input) {
        if(input.files && input.files[0]) {
            const reader = new FileReader()
            reader.onload = e => {
                const previewImage = document.getElementById("id_img_preview")
                previewImage.src = e.target.result
            }
            reader.readAsDataURL(input.files[0])
        }
    }

 

위 그대로 구현해보시면

 

파일선택에서 파일이 변경되었을대

 

이미지 미리보기 함수가 동작하게 됩니다!

 

참고들 하세요!