[ajax] 새로 고침 없이 첨부 파일과 폼 데이터 전송하기

 

폼 등록 후에 새로 고침 없이 기존 폼이 유지 되게 해 달라는 요청을 받았다. 기존에서는 폼에서 버튼으로 서버에 제출하는 방식을 ajax 비동기 방식으로 (웹페이지를 reoad 하지 않고 데이터를 불러오는 방식) 변경해 수정하기로 했다.

 

[Check]

• 새로 고침 없이 구현
• 파일 첨부와 폼 데이터 동시 전송

---

 

 

<form id="form" method="post">
	<input type="text" name="test">
	<input type="file" name="testFile">
	<button id="btnSave" type="button" class="btn btn-lg btn-primary" onclick="save()">등록</button>
</form>

 

• 위와 같이 form에서 test과 testFile의 데이터를 넘기기 위한 함수를 구현해 서버에 넘겨 주면 된다.

 

function save()
{ 
	var form = $('#form')[0];
	var formData = new FormData(form);

	$.ajax({
		url : '데이터 전송 url',
		type : 'POST',
	  data : formData,
		success: function(data){
			// 성공 후 처리

		},
		error: function(Data){
		},
		cache : false,
		contentType : false,
		processData : false
	});
}

 

• 한 가지 주의 해야 할 점은 contentType, processData 둘 다 false 설정 해야 한다.
  • ajax의 default contentType과, 파일 전송의 contentType이 다르다.
  • 내부적으로 전송할 데이터들을 query string 생성하는데, 파일 전송은 query string이 불가하다.

 

 

※ 그 외의 설정들의 확인은 공식 문서에서 확인 가능하다.

https://api.jquery.com/jQuery.Ajax/#jQuery-ajax-settings-settings

jQuery.ajax() | jQuery API Documentation

 

---

이렇게 VIEW 작업이 끝나면 서버에서 폼 데이터들을 받을 수 있게 된다.

 

[밑에는 .NET 서버 단 예제]

public class DataTestDto{
	public string Test{get;set;}
	public HttpPostedFileBase TestFile{get;set;}
}

[HttpPost]
public JsonResult Save(DataTestDto dataTestDto) // 폼에서 전송 된 데이터들을 전송 받게 된다. 
{
}