[jQuery] 페이지 이동없이 ajax로 파일 업로드 하기 / ajaxForm()

페이지 이동없이 파일을 업로드해야 할 경우 ajaxForm을 사용한다.

페이지가 로딩될때 제이쿼리 셀렉터에 명시된 폼을 ajaxForm으로 셋팅해준다.

** .js 

jQuery(function(){

// 사용자 사진 등록 다이얼로그 창 설정

jQuery('#userPhotoUploadDialog').dialog({

title : '사용자 사진  등록' , 

width : 445 ,

height : 175 ,

modal : true ,

autoOpen : false 

});

/*

* 사용자 사진 업로드 폼 ajax폼 설정

*/

var userPhotoUplaodForm = jQuery("#form_userPhotoUpload");

userPhotoUplaodForm.ajaxForm({

dataType: 'json'

, beforeSubmit: function() {

var regx = /\.(bmp|jpg|jpeg|gif|png)$/i; // 이미지 파일

alert('2');

//alert(jQuery("#userPhotoFile").val());

if ( !jQuery("#userPhotoFile").val().match(regx) ) {

alert("이미지 파일만 가능합니다.(bmp, jpg, jpeg, png)");

return false;  

}

}

, success: function(jSonData) {

if (jSonData.status == "success"){

alert('3 - a');

UserPhotoUpload.successResult(jSonData);

} else {

alert('3 - b');

UserPhotoUpload.errorResult(jSonData);

}

}   

, error: function(xhr, status, err) {  

alert("status : "  + status + " err : "  + err);

}

, crearForm: true

});  

userPhotoUplaodForm.submit(function() {

alert('submit 이벤트');

return false;      

});   

});

     

/// ======== 사인이미지 등록 =========================== 

var UserPhotoUpload = {

_signImageTarget : ''

,

openDialog : function(userSeq) {

alert('dialog');

if (Validate.isEmpty(userSeq)) {

alert('사용자 정보가 없습니다');

return;

}

jQuery('#userPhotoUploadDialog').dialog('open');

jQuery('#userSeqInForm_userPhotoUpload').val(userSeq);

}

, closeDialog : function() {

jQuery('#userPhotoUploadDialog').dialog('close');

}

, submitUploadForm : function() {

alert('1');

var form = jQuery('#form_userPhotoUpload');

form.submit();

alert(' submit 후 ');

}

, successResult : function(jSonData) {

alert('4 - a');

alert("사용자 사진이 등록되었습니다.");

jQuery('#img_userPicture').attr('src', jSonData.fileUrlPath);

this.closeDialog();

}

, errorResult : function(jSonData) {

alert('4 - b');

alert(jSonData.message);

}

};

/// ======== 사인이미지 등록 끝 =========================== 

** .jsp

<div id="userPhotoUploadDialog" class="div_dialog">

<div id="ipopup_wrap">

<div id="ipopup_header">

<div class="Pbox01">

        <div class="ibox">

        <div class="ibox_search">

              <form id="form_userPhotoUpload" name="form_userPhotoUpload" action="/user/userPhotoUploadJson.do"

                 onsubmit="returnFalse();" method="post"                         enctype="multipart/form-data">

                <input type="file" name="uploadFile" id="userPhotoFile" style="width:300px; height:18px;" />

                 <input type="hidden" name="userSeq" id="userSeqInForm_userPhotoUpload" />

             </form>

        </div>

</div> 

    <div class="wfoocenter"><a class="btn_styleG" href="javascript:UserPhotoUpload.submitUploadForm();"><span>업로드</span></a>

         or <a class="btn_styleW" href="javascript:UserPhotoUpload.closeDialog();"><span>닫기</span></a></div>

        </div>  

</div>

</div>

</div>

**

폼에서 업로드를 클릭하면 ~

alert (1) --> alert (2) --> alert (submit 이벤트) --> alert (submit 후) --> alert (3) --> alert (4) 순으로 진행된다.  

[출처] [jQuery] 페이지 이동없이 ajax로 파일 업로드 하기 / ajaxForm()|작성자 이초록