[jQuery ajax fileupload] ajax 파일업로드

목    표

● 어떻게 파일을 서버에서 받는가?

● html 폼을 비동기방식으로 파일과 함께 전송을 할수 있는가?

개발환경

● 이클립스

● IE / 크롬브라우저

● jdk 1.7 / tomcat7

사용 스크립트

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery Form Plugin [다운로드]

● html 페이지 부분

    

1) html페이지에 jquery와 jquery form 플러그인을 import 해주자         

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.form.js"></script>

2) jQuery form 플러그인을 사용하여 ajax 전송하는 스크립트를 넣어주자

    * 전에 button태그로 진행했었지만, submit 태그로도 해도 무관하니 input type="submit" 

      으로 해주자

$(function(){
	//폼전송
	$('#ajaxform').ajaxForm({
	   //보내기전 validation check가 필요할경우
            beforeSubmit: function (data, frm, opt) {
			                alert("전송전!!");
			                return true;
			              },
            //submit이후의 처리
            success: function(responseText, statusText){
            	alert("전송성공!!");
            },
            //ajax error
            error: function(){
            	alert("에러발생!!");
            }                               
          });
});

3) html태그를 작성해주자

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="submit" value="Submit" />
</form>

위와같이 코드를 한후 서버에서 데이터들정보를 받아보면 정상적으로 데이터및 파일들을 받을수 

있는것을 확인할수 있다.

두번째 방법으로는 FormData() 객체를 사용하는 것인대 IE9부터인가부터 지원이 되는걸로 

알고 있다.

시범삼아 이방법으로도 테스트를 해보자

두번째방법은 jquery 만 있으면 됨 jquery form plugin 필요없음(x)

ajax 파일업로드 두번째방법 스크립트부분

	$(function(){
          $("#btn").click(function(){
        	  var formData = new FormData();
        	  formData.append("test2", $("input[name=test2]").val());
        	  formData.append("test3", $("textarea[name=test3]").text());
        	  formData.append("test4", $("input[name=test4]")[0].files[0]);
        	 
        	  $.ajax({
        	    url: '/saveFileTest.do',
        	    data: formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    success: function(data){
        	    	alert("EE");
        	    }
        	  });

          });
	});

ajax 파일업로드 두번째방법 html 부분

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="button" id="btn" value="전송" />
</form>

괜찮지 아니한가