[이미지업로드] 미리보기

이미지를 업로드하고 업로드한 이미지를 미리보기 하게 하는 것에 대한 내용이다.

프로필같이 한장만 업로드 하고 업로드한 것을 바로 미리보는 방법과

여러장을 업로드하고 업로드 할때마다 미리보기가 하나씩 늘어나는방법 두가지가 있을 것이다.

 

큰 골자는 다음과 같다.

• 이미지 등록하라는 내용의 div를 만든다.
• input태그를 만든다: 파일 업로드용(type=file)
• div를 클릭하면 input태그가 열리도록(trigger('click')) 한다.
• input에서 업로드(onchange)되면 FilerReader를 통해 파일을 변환해 변수로 받는다.
• 받은 변수를 img태그의 src로 넣어준다.
• 최종 저장시 firebase에 MY_UTIL.uploadFileToFirebaseStrorage를 통해 firebase에 저장한다.