[JS] FormData() 생성자에 데이터 추가하는 법

1. 사용 목적

FormData() 생성자 생성으로 form의 데이터들을 비동기처리를 위한 ajax에 넘겨주기 위함

 

// 생성
let formData = new FormData(form);

//id가 form인 form태그 존재시 -> new FormData(document.querySelector('#form')

 

기존 HTML에서 form 태그가 존재한다면 위처럼 매개변수로 넣어준다.

 

2. 데이터 추가

기본적으로 입력한 데이터는 '문자열'로 추가됨.

set() 과 append()를 사용해서 데이터를 추가한다.

//데이터 추가

let formData = new FormData()

formData.append('age', 18); // 같은 key값으로 데이터 추가 가능.
formData.append('age', 20);

formData.set('age', 21); // set()은 기존 같은 key값의 데이터를 덮어씀.

 

3. FormData() 의 메서드

//FormData() 메서드

let formData = new FormData();

formData.has() // Boolean 값 반환
formData.get() // 값이 여러개라면, 첫 번째 값 반환
formData.getAll() // 값여러개 배열 형태로 반환

formData.keys() // key 값들 반환
formData.values() // value 값들 반환
formData.entries() key, value 배열 형태로 반환

formData.values().next(); // 반복해서 다음 값 반환.

formData.set() // 추가
formData.append()

formData.delete() // 삭제

 

4. FormData()에 이미지 추가하는 법

//이미지 추가

//HTML
<input id="file_form" type="file" name="image_uploads" accept=".jpg,.jpeg,.png">

//JS
let formData = new FormData();

formData.append('img', document.querySelector('#file_form).files[0]);

type="file"인 <input> 태그로 받은 이미지를 formData()에 'img'라는 key로 저장한다.

input.files는 받은 파일에 대한 정보를 배열로 담고있음.

 

 

5. ajax()를 이용한 formData() 전송시

$.ajax()의 contentType, processData 속성의 값으로 false를 줘야 한다.

processData: false;

 - ajax가 multipart 방식으로 데이터를 보낼때 jQuery는 내부적으로 데이터를 query String 형태로 변환해서 보낸다.

따라서 파일전송에서 query String 형태변환을 막기위해 값으로 false를 준다.

 

contentType : false;

 - HTML <form>에서 enctype을 별도로 지정하지 않으면 default 전송방식은

'application/x-www.form-urlencoded'이다. (영문,숫자 전송에 유리한 방식)

 

따라서 'multipart/form-data'방식으로 데이터를 전송하기 위해서 값으로 false를 준다.

 

//HTML
<form id="form" method="post" enctype="multipart/form-data">
	<div>
    	<label for="image_uploads"> 이미지를 선택해주세요 </label>
        <input type="file" id="image_uploads" name="image_uploads" accept=".jpg,.jpeg,.png">
    </div>
	<div>
    	<button onclick="ajaxFunc()">Submit</button>
    </div>
</form>


//JS
function ajaxFunc() {
let formData = new FormData();
    formData.append('img', document.querySelector('#image_uploads').files[0]);
    
    $.ajax({
    	url: 주소,
        data: formData,
        type: 'POST',
        processData: false,
        contentType: false,
        
        success: function(response) {
        	...
        }
    })
}