스프링을 사용한 파일 업로드 2 (Ajax 파일 업로드)

두번째로 AJAX 를 사용해서 파일 업로드 기능을 구현하는 방법입니다

설정은 앞의 스프링 파일 업로드와 거의 유사합니다

AJAX로 업로드를 한 다음 JSON 형식으로 응답을 해주기 위해서

스프링 설정을 좀 추가/수정 해줘야 됩니다

[스프링 설정파일 servlet-context.xml]

<bean id="viewResolver" 

      class="org.springframework.web.servlet.view.InternalResourceViewResolver"

      p:prefix="/WEB-INF/view/" p:suffix=".jsp" p:order="2" />

<bean id="beanNameViewResolver" 

class="org.springframework.web.servlet.view.BeanNameViewResolver">

<property name="order">

<value>1</value>

</property>

</bean>

<bean name="JSON" class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" />

스프링에는 @ResponseBody 라는 기능도 있지만 저는 MappingJacksonJsonView 객체를 사용했습니다

Controller에서 리턴해줄 View 를 JSP 대신에 MappingJacksonJsonView 를 사용하는거죠

JSP 페이지로 뿌려준 다음 그 값을 받아도 상관은 없지만.. 

매우 번거로워 지기 때문에 MappingJacksonJsonView를 많이 사용합니다

요놈을 사용하면 매우 편리하게 JSON 형태의 문자열로 변환한 다음 AJAX CallBack 함수로 전달해줄 수 있습니다

JSON 형태의 문자열을 만들기 위해서 JSONObject / JSONArray 등을 따로 사용하지 않아도 됩니다

JSON 이라는 이름을 가진 Bean 객체를 View로 사용해야 하기 때문에 BeanNameViewResolver를 선언해줍니다

처리하는 우선순위는 InternalResourceViewResolver 보다 낮게 지정해야 하구요

그래서 위쪽의 viewResolver는 order를 2로 beanNameViewResolver는 order를 1로 지정했습니다

Service 부분은 앞의 예제를 그대로 사용하시면 됩니다

Controller와 JSP도 살짝 수정해줍니다

[Controller]

@RequestMapping(value="fileUploadAjax.do", method=RequestMethod.POST)

public ModelAndView fileUploadAjax(MultipartHttpServletRequest mRequest) {

ModelAndView mav = new ModelAndView();

if(boardService.fileUpload(mRequest)) {

mav.addObject("result", "SUCCESS");

} else {

mav.addObject("result", "FAIL");

}

mav.setViewName("JSON");

return mav;

}

소스를 보면 앞에서 만든 Controller와 거의 같습니다

View만 JSON 이라고 변경했습니다

[JSP]

<script src="/js/jquery-1.10.2.min.js"></script>

<script src="/js/jquery.form.js"></script>

<script>

$(document).ready(function() {

$("input[type=submit]").bind("click", function() {

$("form").ajaxSubmit({

success : function(data) {

alert(data.result);

},

error : function(error) {

alert("요청 처리 중 오류가 발생하였습니다.");

}

});

return false;

});

});

</script>

jquery.form.js 플러그인을 사용합니다

jquery의 플러그인이므로 임포트 하기 전에 

<script src="/js/jquery-1.10.2.min.js"></script> 이 구문을 반드시 먼저 써줘야 합니다

jquery.form.js 플러그인의 사용방법은 일반 jquery 의 ajax 구문과 거의 같습니다

form 자체에 action 주소가 입력되어 있기 때문에 따로 url을 지정하지 않았지만 

혹시 변경을 하고 싶다면 url : "주소" 이런식으로 추가해주시면 됩니다

가장 아래쪽에 return false; 이 구문을 반드시 추가해주셔야 원래 submit 버튼의 기능을 막아줍니다

추가하지 않으면 ajax로 결과를 받는것이 아니라 다음 페이지로 넘어가서 JSON 문자열을 출력해버립니다

[파일 업로드 페이지]

[파일 업로드 결과]

완성된 프로젝트 파일입니다

FileUploadDownload2.zip