티스토리 뷰



ajax를 이용하여 일반 form submit과 파일업로드시 form submit 하는 방법입니다



html 소스



<html>

 <body>

  <form name="Frm" id="Frm" method="post">

    성 명 : <input type="text" name="name">

    전 화 : <input type="text" name="tel">

    파 일 : <input type="file" name="upload">

    

    <input type="button" id="btn_save" value="저장">

  </form>

 </body>

</html>

 



일반 form submit script



<script>

$(function(){


$("#btn_save").on("click", function() {

 var _data = $("#Frm").serialize();

 $.ajax({

  type : "POST",

  dataType : "html", //(text, html, xml, json, jsonp, and script)

  cache : false,

  url : "xxxxx.asp",

  data : _data,      

 })

 .done(function(result){ 

    if(result == "OK"){

  alert("저장 되었습니다");

    }else{

               alert("저장 중 에러 발생! 잠시 후 이용해 주세요");

    }

 })

 .fail(function(response){

  alert("error! 잠시 후 이용해 주세요");

 });

});


}); //end function

</script> 




업로드 form submit (붉은색 영역이 포인트)


<script>

$(function(){


$("#btn_save").on("click", function() {


 var frm = document.getElementById('Frm'); 

 var _data = new FormData(frm); 

 $.ajax({

  type : "POST",

  dataType : "html",

  cache : false,

  url : "xxxxx.asp",

  data : _data,      

  mimetype:"multipart/form-data",

  contentType:false,

  processData:false

 })

 .done(function(result){ 

    if(result == "OK"){

  alert("저장 되었습니다");

    }else{

               alert("저장 중 에러 발생! 잠시 후 이용해 주세요");

    }

 })

 .fail(function(response){

  alert("error! 잠시 후 이용해 주세요");

 });

});

}); //end function

</script> 

반응형
댓글
반응형
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday