java, spring

[Spring] Ajax를 이용하는 파일 업로드

isaac.kim 2021. 8. 23.
728x90
반응형

[Spring] Ajax를 이용하는 파일 업로드

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다. 한 번의 클릭이 제게 큰 힘이 된답니다!^^

 

이전 글

2021.08.22 - [Spring] - [Spring] 파일 업로드 설정하기 (xml방식, Java방식)

2021.08.23 - [Spring] - [Spring]<form>태그방식의 파일 업로드

 

이전 글에 이어서 ajax로 파일 업로드하는 방법에 대해 알아보겠습니다.

 

반응형

 

UploadController 클래스 수정

WEB-INF/views 폴더에 uploadAjax.jsp 페이지를 작성합니다.

ajax를 사용해 처리하기 위해 jquery 코드를 추가합니다.

 

jQuery를 이용하는 경우 파일 업로드는 FormData라는 객체를 이용하게 됩니다. FormData는 가상의 <form> 태그와 같다고 생각하면 됩니다. Ajax를 이용하는 파일 업로드는 FormData를 이용해서 필요한 파라미터를 담아서 전송하는 방식입니다.

 

위 코드에 대한 테스트

 

jQuery를 이용한 첨부파일 전송

Ajax를 이용해 첨부파일을 전송하는 경우 가장 중요한 객체는 FormData 타입의 객체에 각 파일 데이터를 추가하는 것과 Ajax로 전송할 때 약간의 옵션이 붙어야 한다는 점입니다.

 

uploadAjax.jsp의 일부

첨부파일 데이터는 formData에 추가한 뒤에 Ajax를 통해서 formData 자체를 전송합니다. 이때 processData와 contentType은 반드시 'false'로 지정해야만 전송되므로 주의해야 합니다. UploadController에서는 기존과 동일하게 MultipartFile 타입을 이용해 첨부파일 데이터를 처리합니다.

 

UploadController 클래스의 일부

브라우저에서 정상적으로 파일이 업로드가 되는지 확인합니다.

 

파일 업로드에서 고려해야 하는 점들

1. 동일한 이름으로 파일이 업로드 되었을 때 기존 파일이 사라지는 문제

2. 이미지 파일의 경우 원본 파일의 용량이 큰 경우 썸네일 이미지를 생성해야 하는 문제

3. 이미지 파일과 일반 파일을 구분해서 다운로드 혹은 페이지에서 조회하도록 처리하는 문제

4. 첨부파일 공격에 대비하기 위한 업로드 파일의 확장자 제한


추후 작성하는 글에서 위 '파일 업로드 시 고려할 점'을 참고하여 개선해 나가는 과정을 담겠습니다.

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다. 한 번의 클릭이 제게 큰 힘이 된답니다!^^
728x90
반응형