[javascript] spring jquery ajax 다중 file upload, ajaxForm() 이용

# spring에서 jquery ajax를 이용한 다중 file upload, ajaxForm() 이용

// 스크립트 추가, jquery.form.min.js
<script type='text/javascript' src='${CONTEXT_PATH}/scripts/jquery.form.min.js'></script>

$(function() {

 // Ajax file upload
 jQuery("#qnaForm").ajaxForm({
  //dataType : 'text', // IE, Chrome 등에서 안될경우 이용..
  beforeSerialize: function() {
   // form을 직렬화하기전 엘레먼트의 속성을 수정
   //$('#qnaForm').attr('value', '이용약관');
  },
  beforeSubmit : function(data, form, option) {
   //validation체크, 성공 : return true;, 실패 : return false;
    if( $("#category2").val() == -1  ){
     alert("카테고리를 선택해 주세요.");
     return false;
    } 
     else if($("#subject").val() == undefined || $("#subject").val() == ""){
     alert("제목을 입력해 주세요.");
     return false;
    }
    else if($("#text").val() == undefined || $("#text").val() == "" ){
     alert("내용을 입력해 주세요.");
     return false;
    }
    
    // 첨부파일 input 가 2개 이상 있으면서 파일을 추가하지 않을경우 해당 input file box는 삭제처리 한다.
    // 삭제하면 data의 length가 줄어든다 그래서 뒤에서부터 검사하면서 삭제처리 한다.
    var len = data.length-1;
    for(i=len; i>0; i--){
       if(data[i].name == "fileData" && data[i].value == ""){
        //console.log(">>삭제처리["+i+"]="+data[i].name+", value="+data[i].value);
        data.splice(i,1);
       } 
    }
    
    /*
     // 테스트용
     // 거꾸로 뽑는 방법 있는지 확인...
      $.each(data, function(index, item) {
       
      console.log(">>name="+item.name+", value="+item.value);
       
       if (item.name == "fileData" && item.value == ""){
        
        console.log(">>삭제처리="+item.name+", value="+item.value);
        data.splice(index,1);
         //delete data[index];
       }
     });
     */

    /*  console.log(">>삭제 후 다시 확인");
     $.each(data, function(index, item) {
      console.log(">>name="+item.name+", value="+item.value);
      }); 
    */

   return true;
  },
  success : function(response, status) {
   //성공후 서버에서 받은 데이터 처리
   //alert("업로드 성공!! : "+ response.flag);
   if (response.flag) {
    $("#con_left").html("");
    $("#con_left").html($("#write_ok_content").html());
   }
   else {
    alert(response.message);
    return false;
   }
  },
  error : function() {
   alert("1:1문의 등록 실패.");
   //에러발생을 위한 code페이지
  }
 });

})


// html

<form id="qnaForm" name="qnaForm" action="${CONTEXT_PATH}/cs/qna/add.json" method="post" enctype="multipart/form-data">
 <br>
  <input  name="fileData" id="fileData" type="file" class="w450" onchange="uploadImageFileChange(this); return false;" />
 <br>
  <input  name="fileData" id="fileData" type="file" class="w450" onchange="uploadImageFileChange(this); return false;" />
 <p class="red">JPG, GIF, PNG 파일을 지원하며 최대 2MB까지 업로드 가능합니다.</p>
 <input type="submit" value="문의하기" alt="" />
</form>




# java단 코드
- 파일객체 받는 파람 


- 파일 저장 처리