-
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 메소드 안에서 반복문을 돌려서 미리보기를 설정합니다.반응형'JavaScript' 카테고리의 다른 글
자바스크립트 array 를 object, Map 으로 변환하기 (0) 2021.04.27 러닝 자바스크립트 2장 gulp 명령어 문제 (0) 2020.06.16 카카오 API 로 책 정보 검색 하기 (0) 2019.02.01
