jQuery ajax 파일업로드

jQuery로 파일업로드 방법에 대해 알아보고자 한다.

 

jQuery 플러그인 중 jQuery Form Plugin 라는게 있지만

여기서는 jQuery와 FormData 객체만으로 업로드 하는 방식을 알아보겠다.

 

jQuery 버전은 3.3.1을 사용했다.

FormData는 자바스크립트 객체로 multipart/form-data 인코딩 방식과 동일한 방식을 사용하도록 제공된다고 한다.

HTML (+Bootstrap)

<form id="form">
	<div class="form-group">
		<label for="title">Title</label>
		<input type="text" class="form-control" id="title" name="title" placeholder="Enter title">
	</div>
	<div class="form-group">
		<label for="content">Content</label>
		<input type="text" class="form-control" id="content" name="content" placeholder="Enter content">
	</div>
	<div class="input-group">
		<div class="custom-file">
			<input type="file" class="custom-file-input" id="file" name="file">
			<label class="custom-file-label" for="file">Choose file</label>
		</div>
	</div>
</form>

 

JavaScript

// Form 전체를 넘겨주는 방식
var formData = new FormData($("#form")[0]);
// 아래 주석은 위와 같은데 표현만 다름
// var formData = new FormData(document.getElementById("form"));
// var formData = new FormData($("form")[0]);

// 원하는 것만 넘겨주는 방식
var formData = new FormData();
formData.append("title", $("#title").val());
formData.append("content", $("#content").val());
formData.append("file", $("#file")[0].files[0]);

$.ajax({
	type: 'POST',
	url: '/board/save',
	processData: false, // 필수
	contentType: false, // 필수
	data: formData,
	success: function(data) {
		
	}
});

 

서버단은 생략한다.

 

참고사이트

https://developer.mozilla.org/ko/docs/Web/API/FormData

끝.