티스토리 뷰
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>
'프로그래밍 > Jquery&' 카테고리의 다른 글
| JSON 관련 유용한 사이트 (0) | 2021.02.13 |
|---|---|
| jquery와 javascript를 이용한 숫자 3자리 콤마 넣기 (0) | 2019.01.22 |
| jquery 정규식 (0) | 2017.06.16 |
| jquery + keyup 한글,숫자,영문만 입력 가능하게 (0) | 2017.06.14 |
| jquery 체크박스 전체 선택 및 해제 (0) | 2017.06.14 |