ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript - 이미지 업로드 미리보기 만들기
    JavaScript 2019. 3. 9. 14:56

    input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자.

    코드

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>썸네일 만들기</title>
      </head>
      <body>
        <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);"/>
        <div id="image_container"></div>
    
        <script>
          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);
            };
    
            reader.readAsDataURL(event.target.files[0]);
          }
        </script>
      </body>
    </html>

    input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다.

    메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이벤트를 작성해줍니다.
    FileReader 가 로드 됐을 때 img 엘리먼트를 생성하고 src 속성을 설정해줍니다.
    그리고 이미지가 들어갈 div에 넣어줍니다.

    리더에서 input 태그에서 선택한 파일을 읽어오도록 설정합니다.

    실행 화면


    여러 이미지 미리보기

        <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>썸네일 만들기</title>
      </head>
      <body>
        <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" multiple/>
        <div id="image_container"></div>
    
        <script>
          function setThumbnail(event) {
            for (var image of event.target.files) {
              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);
              };
    
              console.log(image);
              reader.readAsDataURL(image);
            }
          }
        </script>
      </body>
    </html>

    input 태그에 multiple 속성을 추가해주었고
    setTumbnail 메소드 안에서 반복문을 돌려서 미리보기를 설정합니다.


    반응형

    댓글

Designed by Tistory.