[javascript] 게시판 작성하기2 - 일반 value, 동적인 key를 가진 obj, 파일전송 함수 구현하기

게시판 작성과 관련 하여, 일반적인  value, 동적인  key와 value를 가진  obj, 파일 첨부를 프론트에서 백으로 넘기기 위해 찾았던 방법이다 

 

파일 첨부 전송을 위해서는 다음과 같이 기본적으로 form 태그에 enctype="multipart/form-data" 속성을 추가해야함을 잊지말자.

 

 

 

(1) 기본 설정
<form id ="폼태그 아이디명" enctype="multipart/form-data"> 

<input type="button" value="저장" onclick= "saveData()"/>
</form>

 

(2)관련 함수

function saveData(){

let  obj= {};
var column= ["key1","key2","key3"];
var data = ["test1","test2","test3"];

 

var getForm = $("#전체Form의 id명")[0];
var sendForm = new sendForm(getForm);

 

sendForm.append("title", $("#title").val() ); //저장하려는 객체 파라미터명, value1
sendForm.append("contents", $("#contes").val() ); //저장하려는 객체 파라미터명, value2

 

 

//동적인  key와  value를 가진  obj 객체만들기

for(var i = 0; i< column.length; i++){
  obj[column] =  data[i]; 
}

//map형태의  data는  JSON문자열 형태로 변환한다.
sendForm.append("obj", JSON.stringify(obj) ); 

//삭제하지 않은  filesArray1만 sendForm의 file1에 전송
for(var i = 0 ; i< filesArray1.length; i++){
   if(!filesArray1[i].is_delete){
      sendForm.append("fiel1", filesArray1[i]);
   }
}



$.ajax({
type: "POST",
url : "/전송 url",
async: true,
data: sendForm,
cache : false,
contentType: false,
processData: false,
success: function(data) {
   console.log(data);
 }
});

}