Struts 2 Multi fileupload with JQuery in single element.

스트럿츠2 액션 요청을 전부다 ajax로 처리 하기 위하여 jquery를 도입했다.
파일 업로드 같은 경우는 스트럿츠2에 인터셉터로 통해 파일 업로드를 지원하는데.
멀티 파일 업로드는 ajax로 폼을 전송하였을 때는 값이 넘어 가지 않아서 처리하기가 곤란하다.

이전에는 프로토타입을 도입하여 ajax요청을 처리 하였는데.
멀티파일 업로드를 ajax로 처리하기 위하여 프로토타입을 걷어 내고 jquery로 ajax요청을 처리 하였다.

필요한 라이브러리
jquery.js : jquery core 라이브러리
jquery.form.js : form 을 ajax로 submit 하기 위한 라이브러리 
jquery.MultiFile.js : 멀티파일 업로드 구현을 위한 라이브러리

간단한 구현 시나리오를 살펴보면
멀티파일 업로드 뷰를 구현하고(html)
이를 전송하기 위한 폼 전송 메서드를 구현하고(javascript)
전송한걸 처리하는 actionclass를 구현하면 된다.

그럼 html 부분 부터 살펴보자.

<s:form action="fileUpload" id="fileUpload" method="post" enctype="multipart/form-data">
    <s:file name="file" label="File" id="file" cssClass="multi"/>
    <s:submit/>
</s:form>

아주 간단하다.
그냥 type="file" 인 태그에 class를 multi로 지정해 주면 된다.
일반 html 태그는 <input type="file" name="file" id="file" class="multi">로 지정해 주면 된다.

옵션으로는 class에 지정해 주거나, 속성으로 지정 가능하다.
class="multi max-4 accept-jpg|gif" => 업로드 4개로 제한, jpg, gif 제한
속성으로 지정 하는 방법은 위의 다운로드 사이트를 참고 하길 바란다.
다양한 예제가 준비 되어 있다.

여기까지는 단순히 뷰만 구현되어 있고.
이를 처리 하기 위한 ajax와 액션 클래스를 구성해야 한다.

그럼 ajax 부분 부터 살펴보자.

$(document).ready( function() {
 var options = {
         target:        '#output2',   // target element(s) to be updated with server response
         beforeSubmit:  showRequest,  // pre-submit callback
         success:       showResponse,  // post-submit callback
 
         // other available options:
         url:       'fileUpload.action'         // override for form's 'action' attribute
         type:      'post'        // 'get' or 'post', override for form's 'method' attribute
         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
         //clearForm: true        // clear all form fields after successful submit
         //resetForm: true        // reset the form after successful submit
 
         // $.ajax options can be used here too, for example:
         //timeout:   3000
     };
 
     // bind to the form's submit event
     $('#fileUpload').submit(function() {
         // inside event callbacks 'this' is the DOM element so we first
         // wrap it in a jQuery object and then invoke ajaxSubmit
         $(this).ajaxSubmit(options);
 
         // !!! Important !!!
         // always return false to prevent standard browser submit and page navigation
         return false;
     });
});

 
// pre-submit callback
function showRequest(formData, jqForm, options) {
    // formData is an array; here we use $.param to convert it to a string to display it
    // but the form plugin does this for you automatically when it submits the data
    var queryString = $.param(formData);
 
    // jqForm is a jQuery object encapsulating the form element.  To access the
    // DOM element for the form do this:
    // var formElement = jqForm[0];
 
    alert('About to submit: \n\n' + queryString);
 
    // here we could return false to prevent the form from being submitted;
    // returning anything other than false will allow the form submit to continue
    return true;
}
 
// post-submit callback
function showResponse(responseText, statusText)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object's responseText property
 
    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'xml' then the first argument to the success callback
    // is the XMLHttpRequest object's responseXML property
 
    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'json' then the first argument to the success callback
    // is the json data object returned by the server
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
}

컥 길다.. -_-..showRequest, showResponse는 각각 콜백 함수임으로 별다른 설명은 하지 않겠다.
동작 원리를 살펴보면 폼의 submit을 새로운 함수로 바인딩해서
submit이 jQuery.form 에서 제공하는 ajaxSubmit()으로 실행 되도록 하는것이다.
jQuery.form 역시 해당 다운로드 사이트에 보면 완벽한 예제를 제공 하고 있다.

$(this).ajaxSubmit(options);
를 통해 ajax를 요청한다.

이제 파일 업로드를 구현 해야 한다.
fileUpload.action으로 액션을 요청 하는데.
스트럿츠2에서는 파일 업로드를 위한 인터셉터(fileUpload)를 제공한다.

스트럿츠 설정 파일인 strut.xml에 다음과 같이 액션매핑을 설정한다.

<action name="fileUpload" class="tutorial.FileUpload">
         <interceptor-ref name="fileUpload"/>
         <interceptor-ref name="basicStack"/>
         <result>index.jsp</result>
</action>

그 다음에 실제 파일을 업로드할 FileUpload클래스를 작성해주면 된다.

private File[] upload;
private String[] uploadContentType;
private String[] uploadFileName;
// 각 필드 get/setter 필요    
public String execute() throws Exception
{
       // 톰캣의 임시 폴더에 올라가 있는 파일을 서버에 저장하기 위한 로직이 필요.
       return SUCCESS;
}


위와 같이 액션 클래스를 작성해주고 디버깅을 실행해 주면 upload 변수에 임시서버에 올라간 파일명을 확인 할 수 있다. 이를 가지고 실제 서버에 파일을 쓰는 로직을 작성해 주면된다.

위와 같이 작성해 주면 ajax를 통해 파일 업로드를 수행 할 수 있다.
이것을 사용한 이유는 액션을 수행하고 나서(파일 업로드 후 디비에 파일 관련 정보 저장)
새로고침을 했을 경우 액션 url이 남아 있어서 해당 액션이 다시 수행되는 경우가 발생하였기 때문에
브라우저 url을 변경하지 않고 액션을 수행하기 위하여 이를 작성하였다.

물론 내 레벨이 낮기 때문에
이 포스트 수준역시 낮은 편이며.
아마도 액션을 다시 수행하는것을 막는 방법이 struts2에 존재할 것 같다.

jquery를 사용하여 RIA 애플리케이션 개발자에게 도움이 되었으면 좋겠다.
ps. 파일 쓰는 로직 및 파일들을 다시 작성하여 war 형태로 첨부 할 예정.