FormData란

formdata란 ajax로 폼 전송을 가능하게 해주는 Formdata 객체 입니다.

보통은 ajax로 폼 전송을 할 일이 거의 없지만, 주로 json구조로 키밸류 구조로 데이터를 전송한다.

하지만, form 전송이 필요한 경우 이미지를 ajax로 업로드할때 필요하다.

이미지 추천방법 input[type=file]을 사용해 form을 통해서 업로드 하는것이다.

보통 form 을 제출하면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송한다.

ajax는 반대로 제출 버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고 , 페이지 전환없이 데이터 전송한다.

페이지 전환없이 폼데이터를 제출하고 싶으면 formdate 객체를 사용한다.

formdata 객체란?

window.FormData에 위치한다

append와  set은 비슷하지만 덮어쓰기와 붙여넣기이고 delete를 할경우 다른 파일로 옴겨서 하는것을 확인하였다.

반복문은 아직도 잘모르겠다.

여러개를 append 할때 항상 키값은 같아야 여러 팔일이 같은 키로 업로드 된다!

set말고 append로 그리고 form의 속성중 파일 전송시 enctype는 반드시 'multipart/form-data'형으로 해야한다.

 

제이쿼리로 ajax 파일 업로드 시 유의사항

$.ajax({

contentType : false,
    processData : false,
    data : formData
    url :
    type : 'post'
    success :  . . . 

})

1. ajax로 multipart 방식으로 보낼 때, processData는 일반적으로 서버에 전달되는 data는 query String 형태로 전달되어 집니다.

data 파라미터로 전달된 데이터는 jQuery 내부적으로 쿼리스트링으로 만들어 보내는데, 파일전송에는 이를 피해야함으로

false로 설정해줍니다.

 

2. contentType은 default 값이 "application/x-www-form = urlencoded; charset = UTF-8" 이므로, 보내줄 때

multipart/form-data로 전송해야 하기 때문에 false로 설정해줍니다.

 

 

 

정리하자면, 파일 전송 시 enctype은 multipart/form-data로 text값으로 이루어진 영,숫자는 application/x-www-form-urlencoded type으로 보내는게 효율적입니다.

 

 

참고 https://2ham-s.tistory.com/307