HTML - 이미지 미리보기(jQuery 없이)

 최근에 웹 클론 코딩을 하면서 이미지 미리보기 기능을 구현해야 됐는데 구글링해서 나온 대부분이 제이쿼리를  이용한 코드여서 찾는데 애를 좀 먹었다.

이 글에선 제이쿼리를 쓰지 않고 이미지 미리보기를 구현해보려고 한다.

먼저, 기본으로 제공되는 input 태그와 미리보기를 하기 전 기본 이미지를 띄워보자.

<img src="고양이.jpg" id="img_section" style="width: 400px; height: 400px;">
    <br>
    <input type="file" id="upload_file" accept="image/*" required=true value="업로드">

src 는 본인이 원하는 기본 이미지 경로로 설정해주면 된다.

(어차피 나중에 src 속성을 바꿔서 이미지가 변경됨!)

id , style 등등 나머지 속성을 지정해주자.

---

---

아직은 이미지와 input 버튼만 만들었기 때문에 파일을 아무리 업로드해도 아무 변화가 없다.

이제 동적으로 img 태그의 src 를 바꿔주는 스크립트를 작성해보자.

<img src="고양이.jpg" id="img_section" style="width: 400px; height: 400px;">
    <br>
    <input type="file" id="upload_file" accept="image/*" required=true value="업로드">
    <script>
        const reader = new FileReader();

        reader.onload = (readerEvent) => {
            document.querySelector("#img_section").setAttribute("src", readerEvent.target.result);
            //파일을 읽는 이벤트가 발생하면 img_section의 src 속성을 readerEvent의 결과물로 대체함
        };

        document.querySelector("#upload_file").addEventListener("change", (changeEvent) => {
            //upload_file 에 이벤트리스너를 장착

            const imgFile = changeEvent.target.files[0];
            reader.readAsDataURL(imgFile);
            //업로드한 이미지의 URL을 reader에 등록
        })
    </script>

위 코드를 작성하면 input 태그에 "change" 속성의 이벤트리스너를 달아주었기 때문에 input 태그가 변경될 때마다(파일을 업로드할 때마다) img 태그의 src 값이 해당 파일의 URL 로 변경된다.

---

---

이미지가 바뀌었다.ㅎㅎ

f12를 눌러 확인해보면 src의 값이 변경된 걸 확인할 수 있다.

여기까지가 이미지 미리보기 기능이다. 

그런데 페이지를 만들다보면 저 업로드 버튼이 상당히 못생겨서 바꿔주고 싶어진다.

다음 글에선 업로드 버튼을 입맛에 맞게 바꿔보려고 한다.