비동기식으로 파일 업로드

라이브러리준비

jackson-annotations-2.9.8

jackson-core-2.9.8

jackson-databind-2.9.8

Multipart Resolver

Controller-servlet에 Multipart Resolver가 지정이 되어있어야한다.

<!-- Multipart Resolver설정 -->
	<bean id="multipartResolver" 
 	  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 		<property name="defaultEncoding" value="utf-8"/>
 		<property name="maxUploadSize" value="-1"/>
 	</bean>

컨벌터설정

파일을 주고 받을려면 json을 사용해야 한다. 빈을 명시해주자.

<bean id="jsonHttpMessageConverter"
		class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
	<bean
		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<ref bean="jsonHttpMessageConverter" />
			</list>
		</property>
	</bean>

JSP에서 폼으로 파일을 보내기 때문에 컨트롤러에서
post로 받는다고 @RequestMapping에 명시해줘야한다.

@RequestMapping(value = "/saveImage.inc", method = RequestMethod.POST)

이때 파일을 주고받기 위해서는 VO객체를 만들어야한다.

왜냐면 인자로 파일을 받을 수 없기 때문이다.

public class ImgVO {
	private MultipartFile s_file; 
	
	public MultipartFile getS_file() {
		return s_file;
	}

	public void setS_file(MultipartFile s_file) {
		this.s_file = s_file;
	}

파일을 받을거기때문에 MultipartFile로 생성을 해주고 getter와 setter을 만들어주자.

비동기식통신을 하기위한 메서드를 만들어보자

@RequestMapping(value = "/saveImage.inc", method = RequestMethod.POST)
	@ResponseBody
	public Map<String, String> saveImg(ImgVO vo) {
		
		// 반환객체 생성
		Map<String, String> map = new HashMap<String, String>();

		// file이 넘어왔는지 안넘어왔는지 알아내야한다.
		MultipartFile f = vo.getS_file();
		String fname = null;
		if (f.getSize() > 0) {
			// 첨부파일을 저장할 위치 - 절대경로화
			String realPath = application.getRealPath(img_path);

			fname = f.getOriginalFilename();
			
			// 첨부파일이 이미 저장된파일이름과 동일할경우에는
			// 알아서 체크해야한다. - FileRenameUtil
			fname = FileRenameUtil.checkSameFileName(fname, realPath);

			try {
				
				f.transferTo(new File(realPath, fname));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}

		// 비동기식으로 요청한 곳으로 저장된 파일의 경로와 파일명을 보내야한다.

		// 현재 서버 경로
		String path = request.getContextPath();

		map.put("path", path + img_path);
		map.put("fname", fname);
		return map;
		// map =====> "path" :"/editor_img"
		// map =====> "fname" :"/(파일이름)"
	}

이렇게 만들었다면 JSP에서 ajax부분에서 정의해보자

$(function(){
			$("#content").summernote({
				height: 500,
				leng: "ko-KR",
				focus: true, /* 커서를 미리 가져다 놓는다. */
				callbacks:{
					onImageUpload: function(files, editor){
						//이미지가 에디터에 추가될 때마다 수행하는 곳!
						//추가되어 들어온 이미지가 배열로 인식됨!
						for(var i=0; i<files.length; i++)
							sendImage(files[i], editor);//서버로 비동기식 통신으로
											//이미지를 서버로 업로드시킨다.
					}
				}
			});
			$("#content").summernote("lineHeight",.7);
		});
		
		function sendImage(file, editor){
			var frm = new FormData();
			//파일을 보내야할때는 폼에 담아서 보내야한다.
			
			//보내고자 하는 자원을 위해서 만든 폼객체에 파라미터로 넣어준다.
			frm.append("s_file", file);
			
			//비동기식 통신
			$.ajax({
				url: "saveImage.inc",
				data: frm,
				type: "post",
				contentType: false, //파일의형식 - enpType으로 가기 위해서 파일의 형식을 없애버렸다.
				processData: false,
				cache: false,
				dataType: "json", // 서버로부터 받을 데이터 형식
			}).done(function(data){
				
				var path = data.path; //이미지가 저장된 경로
				var fname = data.fname; // 파일명
				$("#content").summernote("editor.insertImage", path+"/"+fname);
				
			}).fail(function(err){
				//서버에서 오류가 발생 시
			});
		}