web

[JQuery] ajax로 form data(multipart) 전송 하기 본문

JAVASCRIPT/JQuery

[JQuery] ajax로 form data(multipart) 전송 하기

사용자 원동호 2018. 10. 4. 15:47
728x90
반응형

form tag로 multipart data 전송하기


 
<form method="POST" enctype="multipart/form-data" id="fileUploadForm"> 	
  <input id="dmtitle" type="text" name="dmtitle"/> 	
  <textarea id="dmcontents" name="dmcontents"></textarea> 	
  <input type="text" id="crcode" name="crcode"/> 	
  <input type="text" id="tcode" name="tcode"/> 
  <input type="text" id="uid" name="uid"/> 
  <input type="file" name="files"> 	
  <input type="submit" value="Submit" id="btnSubmit"/>
</form> 

 

form tag로 전송하게 되면 간단하게 전송할 수 있지만 본인은 form tag를 별로 좋아하지 않는다.

 

서버로 전송하기는 간편할 수 있으나, 성공했는지 여부를 클라이언트에서 확인하고 싶었기 때문에 ajax를 이용하고 싶었다.

$("#btnSubmit").click(function (event) {         
	//preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드이다. submit을 막음 
	event.preventDefault();          
    // Get form         
    var form = $('#fileUploadForm')[0];  	    
    // Create an FormData object          
    var data = new FormData(form);  	   
    // disabled the submit button         
    $("#btnSubmit").prop("disabled", true);   
    
    $.ajax({             
    	type: "POST",          
        enctype: 'multipart/form-data',  
        url: "/document/upload",        
        data: data,          
        processData: false,    
        contentType: false,      
        cache: false,           
        timeout: 600000,       
        success: function (data) { 
        	alert("complete");           
        	$("#btnSubmit").prop("disabled", false);      
        },          
        error: function (e) {  
        	console.log("ERROR : ", e);     
            $("#btnSubmit").prop("disabled", false);    
            alert("fail");      
         }     
	});  
}); 

 

form data를 javascript 변수에 넣은 다음 ajax내에 data를 넣어주기만 하면 끝!

enctype , processData, contentType은 필수로 입력해줘야 할 듯

 

 

도움이 되셨다면 하트 및 댓글 부탁드립니다♥

 

 

 

 

출처 : https://www.mkyong.com/jquery/jquery-ajax-submit-a-multipart-form/

728x90
반응형
6 Comments
댓글쓰기 폼