반응형
html 미리보기
-
JavaScript - 이미지 업로드 미리보기 만들기JavaScript 2019. 3. 9. 14:56
input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자. 코드 input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다. 메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이벤트를 작성해줍니다. FileReader 가 로드 됐을 때 img 엘리먼트를 생성하고 src 속성을 설정해줍니다. 그리고 이미지가 들어갈 div에 넣어줍니다. 리더에서 input 태그에서 선택한 파일을 읽어오도록 설정합니다. 실행 화면 여러 이미지 미리보기 input 태그에 multiple 속성을 추가해주었고 setTumbnail 메소드 안에서 반복문을 돌려서 미리보기를 설정합니다.