[Js] ajax 파일 업로드하기

이번 글에서는 ajax를 이용하여 파일을 서버에 업로드 하는 방법에 대해 알아보겠습니다. ajax를 사용하게 되면 굳이 파일 전송을 위하여 form 태그로 감싸줄 필요가 없습니다.

이 글은 스프링 기준으로 작성되었습니다.

# Front

<script type="text/javascript">
$(()=>{
	$('#fileSubmitBtn').on("click",function(){
		var form = $('#attachFile')[0].files[0];
		var formData = new FormData();
		
		formData.append('files', form);
		 $.ajax({
		        type: "POST",
		        enctype: 'multipart/form-data',
		        url: "/test/main2.do",
		        data: formData,
		        processData: false,
		        contentType: false,
		        cache: false,
		        timeout: 600000,
		        success: function (data) {
		            alert("성공");
		        },
		        error: function (e) {
		            alert("실패");
		        }
		    });
	});
})
</script>

<html>
  <head>
  	<meta charset=UTF-8">
  	<title>결과창</title>
  </head>
  <body>
      <input type="file" id="attachFile">
      <div id="fileSubmitBtn">제출하기</div>
  </body>
</html>

ajax의 속성 나머지는 알거라 생각하고 processData만 짚고 넘어가보겠습니다.

processData는 일반적으로 서버에 전달되는 데이터는 query string 이라는 형태로 전달됩니다.

http://example.com/over/there?title=Main_page&action=raw

? 뒤에 쿼리스트링이 전달됩니다. 주의할 점은 파일 전송이 있을 경우 이를 반드시 false로 해주어야 합니다.

# Back

@Controller("mainController")//애너테이션을 이용해 빈으로 자동 변환
@RequestMapping(value="/test")//클래스 단계의 url 맵핑
public class MainController {
	@RequestMapping(value="/main1.do", method = RequestMethod.GET)//메서드 단계의 url 맵핑
	public ModelAndView main1(HttpServletRequest request, HttpServletResponse response)
	throws Exception{
		ModelAndView mv = new ModelAndView();
		mv.addObject("msg", "main1");
		mv.setViewName("main");
		
		return mv;
	}
	
	@RequestMapping(value="/main2.do", method = RequestMethod.POST)
	public ModelAndView main2(HttpServletRequest request, HttpServletResponse response, MultipartHttpServletRequest mRequest)
	throws Exception{
		ModelAndView mv = new ModelAndView();
		mv.addObject("msg", "main2");
		mv.setViewName("main");
		
		return mv;
	}
	
}

파일 첨부가 있을 경우 반드시 Controller의 인자로 MultipartHttpServletRequest 를 추가해주어야 합니다. 파일첨부가 있는 데 만약 MultipartHttpServletRequest가 없을 경우 맵핑을 못합니다.

# 실행

view.jsp

파일 선택을 눌러 파일을 첨부해준 다음 제출하기 버튼을 눌러줍니다.

파일 첨부를 한 후 다음과 같이 콘솔에 찍어보겠습니다.

콘솔 출력 결과

보시면 formData에 분명 file을 담았는데 콘솔에는 없는 값으로 나옵니다. 이것은 보안상 콘솔에 찍히지 않는다고 하니 콘솔에 값이 나오지 않더라도 당황하시면 안됩니다.

다시 본론으로 넘어와서 파일을 첨부하고 해당 url로 통신을 보내보겠습니다.

mRequest에 파일이 잘 담긴 걸 볼 수 있습니다.

읽어주셔서 감사합니다.

질문은 언제나 환영합니다.

"난 반드시 백엔드 왕이 될거야"

'...' 카테고리의 다른 글

[Spring] @RestController 란? (0)	2021.01.18
Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest] 에러 (0)	2021.01.18
[Spring] Dispatcher-Servlet이란? (0)	2021.01.17
[Spring] 서블릿 컨테이너란? (0)	2021.01.17
[Spring] 스프링에서 환경 변수 사용하기 (0)	2021.01.14

이번 글에서는 ajax를 이용하여 파일을 서버에 업로드 하는 방법에 대해 알아보겠습니다. ajax를 사용하게 되면 굳이 파일 전송을 위하여 form 태그로 감싸줄 필요가 없습니다.

이 글은 스프링 기준으로 작성되었습니다.

# Front

ajax의 속성 나머지는 알거라 생각하고 processData만 짚고 넘어가보겠습니다.

# Back

파일 첨부가 있을 경우 반드시 Controller의 인자로 MultipartHttpServletRequest 를 추가해주어야 합니다. 파일첨부가 있는 데 만약 MultipartHttpServletRequest가 없을 경우 맵핑을 못합니다.

# 실행

파일 선택을 눌러 파일을 첨부해준 다음 제출하기 버튼을 눌러줍니다.

파일 첨부를 한 후 다음과 같이 콘솔에 찍어보겠습니다.

보시면 formData에 분명 file을 담았는데 콘솔에는 없는 값으로 나옵니다. 이것은 보안상 콘솔에 찍히지 않는다고 하니 콘솔에 값이 나오지 않더라도 당황하시면 안됩니다.

다시 본론으로 넘어와서 파일을 첨부하고 해당 url로 통신을 보내보겠습니다.

mRequest에 파일이 잘 담긴 걸 볼 수 있습니다.

'...' 카테고리의 다른 글

검색 태그

티스토리툴바