학원에서 스프링 MVC를 적용하여 프로젝트를 학생들이 하고 있는데 Ajax와 첨부파일을 적용하는 것이 어렵다고 하여 정리해 본다.
나의 작업환경은 다음과 같다.
1. 멀티 게시판 : 하나의 Article 데이터베이스 테이블에 여러 개의 게시판의 게시물을 한꺼번에 저장
- 게시판 테이블 운영
- ref, step, depth 체계를 가진 게시판
- 네이버에서 공개한 스마트에디터 사용
- 본문에 사진 추가 기능 사용
- 첨부 파일은 5개 까지 적용 가능
- 오라클 11g DBMS 사용 : Board, Article, PdsItem 테이블 및 각각의 sequence 운영
2. 스마트에디터에 대한 스프링 MVC 적용
- 소스코드 위치 : src/main/webapp/resources/smarteditor
- photo_uploader/popup/attach_photo.js 수정
+ html5Upload() function
* 본문에 삽입되는 사진을 서버에 저장하기 위한 URL : /contextPath/board/file_uploader_html5 (내부적으로 Ajax 처리)
+ callFileUploader() function
* sUrl : 'contextPath/board/file_uploader'
* sCallback : 'resources/smarteditor/photo_uploader/popup/callback.html'
- writeForm.js 수정 : 게시판 쓰기를 위한 jsp 파일의 javascript 파일
+ nhn.husky.EZCreator.createInIframe 수정
nhn.husky.EZCreator.createInIFrame({
oAppRef: editor_object,
elPlaceHolder: "smarteditor",
sSkinURI: ctx + "/resources/smarteditor/SmartEditor2Skin.html",
htParams : {
// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bUseToolbar : true,
// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
bUseVerticalResizer : true,
// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
bUseModeChanger : true,
fOnBeforeUnload : function(){
}
}
});
+ 전송 버튼을 눌렀을 때 처리 : 가비지 컬렉션 처리를 위해 먼저 사진 파일에 대한 관리를 먼저하고, 이후 첨부파일에 대한 저장을 처리
$("#addBtn").click(function(){
//id가 smarteditor인 textarea에 에디터에서 대입
editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);
// 이부분에 에디터 validation 검증
var el = document.createElement('html');
el.innerHTML = editor_object.getById["smarteditor"].elPlaceHolder.value;
var imageF = el.getElementsByTagName('img');
var url = ctx + "/board/file_uploader_real";
var params = "";
for(var i = 0;i < imageF.length;i++) {
if(i == 0)
params += ("src=" + imageF[i].src + "&title=" + imageF[i].title);
else
params += ("&src=" + imageF[i].src + "&title=" + imageF[i].title);
}
sendRequest(url, params, callbackFunction, "POST");
callTimerProcessing();
})
function callTimerProcessing() { // 사진에 대한 처리를 보장하기 위해 loop를 돌다, 응답이 오면 처리
if(loop) {
setTimeout(function() {
callTimerProcessing();
}, 100);
}
else {
//폼 submit
$("#frm").submit();
}
}
서버에서 처리는 다음에 ...
