21'C 흐림
서울 강남구
서버와의 ajax 통신에는 jQuery를 사용하고 업로드를 위해서 FormData 객체를 사용하는 방법과 jQuery Form Plugin 을 사용하는 방법을 알아 보겠습니다. 전체소스는 하단에 첨부 되어 있습니다. jQuery Form Plugin 은 https://github.com/jquery-form/form 에서 다운로드 받을 수 있습니다.
두 가지 방법의 차이점은 다음과 같습니다.
- FormData를 사용하는 경우 : Internet Explorer 10이상 부터 사용할 수 있습니다.
- jQuery Form Plugin을 사용하는 경우는 IE10 이하에서도 사용할 수 있지만 문제를 일으키는 경우도 있습니다.
파일업로드 폼 html 입니다. 두 개의 파일 선택필드와 업로드 버튼으로 구성되어 있습니다. uploadForm.jsp 파일 입니다.
<div>
<form id="uploadForm" enctype="multipart/form-data" method="POST" action="/pentode/upload.do">
<label for="file1">파일 첫 번째</label>
<div><input type="file" id="file1" name="file" required="required" /></div>
<label for="file2">파일 두 번째</label>
<div><input type="file" id="file2" name="file" required="required" /></div>
</form>
</div>
<div>
<button id="btn-upload">파일 업로드</button>
</div>
업로드 처리를 위한 JavaScript 부분입니다. 먼저 FormData 를 이용하는 방법입니다. 이 경우는 IE 10 이상에서 동작합니다.
<script src="<c:url value="/js/jquery-3.1.0.min.js"/>"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#btn-upload").on("click", function(){
var form = new FormData(document.getElementById('uploadForm'));
$.ajax({
url: "/pentode/upload.do", //컨트롤러 URL
data: form, dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
success: function (response) {
alert("success");
console.log(response);
},error: function (jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
//]]>
</script>
jQuery Form Plugin 을 사용하는 방법입니다.
<script src="<c:url value="/js/jquery-3.1.0.min.js"/>"></script>
<script src="<c:url value="/js/jquery.form.min.js"/>"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#btn-upload").on("click", function(){
$('#uploadForm').ajaxSubmit({
url: "/pentode/upload.do", //컨트롤러 URL
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
success: function (response) {
alert("success");
console.log(response);
},error: function (jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
//]]>
</script>