목록이미지업로드 (1)

군붕이의 메모장

자바스크립트로 Image Upload 및 Preview 구현하기

중고나라 클론 프로젝트를 하면서 처음 해보는 이미지 업로드 기능에 부딪혔다. 여기저기 정보를 찾아보면서 공부한 내용을 정리해보려고 한다. 그리고 단순 input에 받는것이 아닌 다른 요소(div 등..)를 눌렀을 때 이미지 업로드와 동시에 preview 화면도 구현한다. 해당 포스트에 있는 코드는 이해를 돕기위해 코드를 모두 html 파일 내부에 작성했다. 실제 프로젝트에서는 html, css, js를 모두 나눠서 작업했다. ● HTML 에서 이미지를 업로드 받는방법 input type속성을 file로 정의하면 파일 업로드가 가능해진다. 또한 accept 속성을 img/*으로 지정할 경우 이미지 파일만 업로드가 가능해진다. ● 다른 요소(div 등..) 클릭시 input 이벤트가 발생하게 하는방법 내가 ..
프로그래밍 언어/자바스크립트 2022. 1. 8. 14:11
이전 Prev 1 Next 다음