HTML, CSS, JS

[Javascript] 이미지 Upload 및 Preview 초간단 ver

yubi5050 2022. 7. 14. 03:03

👉 이미지 Upload & Preview (with. JS)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input type="file" id="fileUpload" />
    <img id="preview" />
  </body>
  <script>
    const file_input = document.getElementById("fileUpload");
    const preview_img = document.getElementById("preview");

    file_input.onchange = function (e) {
      const img_file = file_input.files[0];
      if(img_file) {
        preview_img.src = URL.createObjectURL(img_file);
      }
    };
  </script>
</html>