Javascript 이미지 업로드 방법

JavaScript로 이미지파일을 불러오고 html화면에 띄우는 방법이다.

input, button, img 태그를 사용하여 버튼을 누르면 이미지를 업로드하여 화면에 띄울 것이다.

 

먼저 JavaScript로 이미지 파일 불러오기를 어떻게 해야할까? 

 

input 태그에 type을 "file"로 지정해 준다. 

  <input type="file" id="inputImage">

  <button id="sendButton">보내기</button>

  <img src="" class="uploadImage">

 

보내기를 클릭하면 file 주소를 가져오는 방법은 다음과 같다.

<script>

    document.querySelector("#sendButton").addEventListener('click',()=>{

      let selectFile = document.querySelector("#inputImage").files[0];

      console.log(selectFile);

    })

  </script>

 

 

파일을 선택하고 보내기를 클릭하면 console창에 file에 대한 정보가 나온다.

이제 저 정보를 가지고 화면에 뿌려주면 된다.

URL.createObjectURL()을 사용해서 위에서 받은 file정보를 넣어준다.

그다음 img의 src에 넣어준다.

 

  <script>

    document.querySelector("#sendButton").addEventListener('click',()=>{

      let selectFile = document.querySelector("#inputImage").files[0];

      const file = URL.createObjectURL(selectFile);

      document.querySelector(".uploadImage").src = file;

    })

  </script>

 

결과화면은 다음과 같습니다.

보라색이 선택한 이미지 입니다.