javascript/ 등록한 사진들을 해당 화면에서 바로 확인할 수 있도록 구현하기

음식 사진을 등록할 때 파일 열기 버튼을 누르고 (깔끔한 파일 선택 버튼 만드는 방법은 전 글에 포스팅 하였습니다.^^)

사진을 등록하면 기본적으로 해당 화면에서 사진이 바로 보이지 않고 사진의 파일명만 보일 것이다.

 

사진을 등록했지만 등록한 사진은 보이지 않고 파일명만 보이는 상태

 

등록한 사진을 등록자가 해당 화면에서 바로 확인할 수 있도록 구현하려면 어떻게 해야 할까?

자바스크립트를 이용하면 사진을 바로 확인 가능하도록 구현할 수 있다. 

 

function setThumbnail(event) {
    var reader = new FileReader();

    reader.onload = function(event) {
      var img = document.createElement("img");
      img.setAttribute("src", event.target.result);
      document.querySelector("div#image_container").appendChild(img);
      
      img.style.width = "360px"; 
      img.style.height = "300px";
    };

    reader.readAsDataURL(event.target.files[0]);
  }

자바스크립트(javascript)에서 위의 함수를 이용해서 등록한 사진들을 바로 확인해볼 수 있도록 하는 코드를 짠 후에

 

<input type="file" id="file" name="file" accept="image/*" onchange="setThumbnail(event);" required/>
                <div id="image_container"></div>

html에서 setThumbnail 함수를 적용시켜주었더니

 

해당 화면에서 등록한 사진을 등록자가 바로 확인할 수 있게 되었다!

 

프론트엔드 개발을 하면서 자바스크립트를 사용하여 구현하는 것이 가장 어려웠고, 지금도 가장 어렵다고 느끼는 부분이 자바스크립트인데 확실히 어려운 만큼 더욱 예쁘고 사용자에게 편리한 기능들을 구현할 수 있는 것 같다.