[JAVA 파일 다중 업로드] 한 페이지 내 name 값 다른 파일 업로드 저장 (타임리프 Thymeleaf)

개발하기 전,,,, 약간의 사담

 

항상 한 페이지내 다중 파일 업로드라 하면 한 시퀀스 내 여러 개의 파일 저장하는 로직만 구현해보고

페이지 내 각각 시퀀스 번호에 대한 파일 업로드가 나눠져서 개발하는 건 처음으로 구현해보았다,,

화면은 하드코딩으로 개발해서 너무 간단했지만 java에서 어떤 값에 대한 파일 인지 구분 짓기가 생각보다 쉽지 않았던 거 같았다 그래도 어찌어찌해서 열심히 개발은 했다만,,, 더 간단히 개발할 수 있으면 개발한 예시 소스 보면서 리팩터링 하길 바란다.

 

 

---

배너 값이 아예 없을 때 첫 화면

DB에 배너 값이 없을 경우 나오는 화면으로 아래서부터 순차적으로 보여주게끔 설정했다.

• HTML(Thymeleaf 사용)

▶ if 문을 걸어서 list 값이 5보다 작을 경우 화면에 나오도록 하였다.

예 ) list 2개 있을 경우 3개만 나오도록

나머지 input 은 순차적으로 카운트 늘어나는 걸 붙여서 ex) USE_YN1 , USE_YN2 이런 식으로 하였다.

 

만약 값이 있을 경우 - 등록된 값만 화면에 보여준다.

DB에 저장된 값이 있을 경우에 화면에 보여준다. 현재 보여준 화면에선 1개만 데이터가 있어 보여주고

나머지 No.2 ~5 까진 값을 등록해줄 수 있게 보여주고 있다.

 

• HTML(Thymeleaf 사용)

▶ input type=text 일 경우 th:value  / input type=radio 일 경우 th:checked 사용해서 화면에 보여주었다

데이터가 저장되어 있어도 수정이 가능하도록 첨부파일은 삭제 버튼과 파일이 있을 경우, 없을 경우를 다르게 보여줘야 돼서 th:if를 걸었다.

 

• Javascript

어떤 No(번호)에 대한 파일을 등록했는지 체크해주기 위해 input 박스에 hidden 걸어 파일 값이 있을 경우 파일 이름만 잘라 넣어주었다.

그리고 ajax 비동기 통신으로 폼에 대한 데이터를 넘겼다

getJsonMultiData는 공통 JS에 function을 만들어서 간단하게 한 줄로 보인다.

다른 파일에도 ajax 통신을 자주 사용하다 보니 공통으로 만들어 주면 소스가 확실히 깔끔해진다.

 

 

⊙ ajax 비동기 통신 소스

 getJsonData - 기본 ajax 코드

 getJsonMultiData - 파일 전송 ajax

 

 

• Java

(참고 : 우린 VO 가 아닌 Map 방식으로 개발 진행 중이어서 따로 Vo에 변수를 선언할 필요가 없다)

view에서 bann_sn 값을 배열로 던진 걸 쪼개 준 뒤

for문을 사용해 5개의 bann_sn 가 저장되어있는지 없는지 확인한다

그다음 insert 혹은 update를 해준 뒤 파일 업로드를 해준다.

 

위에 FileUtil.java 에서 업로드된 파일이 몇 개인지 찾고

여러 개의 파일 중 업로드된 FILE_NM(파일 이름)과 view에서 파일 이름을 가져온 값과 비교하여 같으면 insert 해주는 방식을 사용하였다

 

그럼 정상적으로 업로드된 파일에 맞춰 저장이 가능하다.

 

 

---

개발을 마무리하며 팀장님께 여쭤보니 파일을 한 번에 5개를 업로드하면 파일 업로드 용량 많은걸 올렸을 경우 중간에 끊길 수도 있어 스크립트로 루프 돌려 1개씩 저장하도록 하면 문제 생길 일도 적다고 하셨다..

이미지 업로드만 사용하니 이 방법도 괜찮겠지만 용량 많은 첨부파일 업로드 개발은 다른 방법으로 구현하는 것도 좋을 거 같다