[ajax] jQuery ajaxForm 사용하기

프로젝트를 진행하던 중 파일을 업로드 기능을 만들게 되었다.

항상 form submit을 사용하다가 이번 프로젝트의 경우 비동기식으로 처리를 하였다.

ajax 처리를 찾아보던 중 ajaxForm이라는 블라블라를 찾아냈다. jQuery 플러그인이라고는 하는데...

jQuery에서 찾아보니 아래와 같이 나온다. 없단다.

Search Results for: ajaxform Nothing Found Apologies, but nothing matched your search criteria.

다시 구글링 하니 http://malsup.com/jquery/form/ 이러한 사이트가 있다.

여기서 배포하나 보다.

영어는 잼병이라 알아서 번역해서 보시길 바라며, 

아래와 같이 사용하면 된다.

<script type="text/javascript" src="/base/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/base/js/jquery.form.min.js"></script>
<script type="text/javascript">
 
$j(function(){
    
    $j("#fileRegistBtn").on("click", function(){
        
        if($j("#groupSeq").val() == ""){
            alert("그룹을 지정해 주십시요.");
            $j("#groupSeq").focus();
            return;
        }
        
        $j("#form").ajaxForm({
            type: 'POST',
            url: '<c:url value='${pageContext.request.contextPath}${prefix}/fileRegistProc.do'/>',
            enctype: "multipart/form-data",
            dataType: "json",
            contentType: false,
            processData: false,
            beforeSubmit: function (data,form,option) {
                if($j("#uploadFile").val() == "") {
                    alert("첨부파일을 선택해 주세요.");
                    return false;
                }
                else{
                    var ext = $j("#uploadFile").val().split('.').pop().toLowerCase();
                    if($j.inArray(ext, ['xlsx','xls','txt']) == -1) {
                        alert("xlsx, xls, txt 파일만 업로드 할수 있습니다.");
                        return false; 
                    }
                }
            },
            success: function(result) {
                if(result.status == true) {
                    alert(result.message);
                    parent.document.location.reload();
                    closeLayer();
                }
                else
                {
                    alert(result.message);
                }
            },
            error: function(data, status, err) {
                alert(data.responseText);
            }
        }).submit();
    });
    
});
</script>

여기서 주의할 점이 있다. http://mytory.net/archives/223 참고 하였다. 

주의할 점 [덧] dataType을 json으로 설정했다면, 조심할 게 있다. 예컨대 {result: 1, msg: "성공!"} 이런 식으로 쓰면 안 된다. json은 key값도 따옴표를 붙여야 하기 때문이다. 위처럼 응답을 주도록 쓰고 dataType을 json으로 쓰면 처리가 실패한 것으로 간주되 아무 일도 안 일어난다, {"result": 1, "msg": "성공!"} 이렇게 써야 json으로 인식한다. 절대로 이것 때문에 삽질하지 말자. 만약 PHP를 사용한다면, 배열을 만든 다음 아래 코드처럼 json_encode 함수를 사용하면 된다. $arr = array('a'=>'에이', 'b'=>'비'); echo json_encode($arr); [덧2] 응답이 아무것도 없으면 아무 일도 안 일어난다.(즉, success에 function을 넣어 놔도 작동하지 않는다.) 테스트할 때 응답하는 쪽 파일에 아무거라도 출력하도록 하고 테스트를 해야 한다.

추가로 뻘짓한 부분이 있는데 인터넷익스플로러 7이하던가 response 헤더에서 contentType을 applicaton/json로 하니 안된다. 어찌 안된건지는 기억이 따로 나질 않는다. 그래서 그냥 text/plain로 처리했다.

...!!!

생각 났다! contentType을 application/json 하면 json 결과가 파일로 다운받아 진다!

따라서 text/plain 으로 처리 했다!!

이상 jQuery ajaxForm 사용기 입니다.