다중 이미지 미리보기
-
[JavaScript] SpringBoot : 다중 이미지 미리보기(<input type = "file">, 이미지 리스트 동적 생성, 이미지 추가 및 삭제)프로젝트/기능 정리 2023. 7. 23. 22:24
목적 파일 여러개 미리보기 기능 구현 미리보기 이미지 클릭시 이미지 삭제 미리보기 이미지들을 서버에 전송할 수 있도록 배열에 저장 이번 프로젝트에서 메인 기능 중 하나인 갤러리는 여러 이미지를 서버에 보내고, 서버로부터 여러 이미지를 받아와서 화면에 뿌려줘야 한다. 가장 처음 단계는 태그를 통해 이미지 파일을 받아서 화면에 미리보기 표시를 해주는 것이다. JS로 어떻게 처리했는지 정리해보도록 하겠다. 결과화면은 아래와 같다. [JSP] 파일선택 우선 JSP 쪽의 태그는 위와 같다. 이전에 프로필 사진 기능 구현 내용을 정리하면서 이미지를 받는 태그의 name을 잘 설정해줘야 한다고 했다. 이유는 Spring에서 해당 name을 가지고, 전달받은 모델의 setter를 찾아 매핑하기 때문이다. 만약 Ajax..