[JS] FormData

FormData 객체는 window.FormData에 위치합니다.

var formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item', 'orange');
formData.append('item', 'melon');

자, new FormData()로 새로운 객체를 생성해주시고요. append 메소드로 키-값 형식으로 하나씩 추가해주시면 되겠습니다.

같은 키를 가진 값을 여러 개 넣을 수도 있습니다. 덮어씌워지지 않고 추가됩니다.

참고로 값은 문자열로 자동 변환됩니다. 숫자를 넣어도 문자열이 되고, 배열을 넣어도 콤마로 구분한 문자열이 됩니다.

객체는 넣으면 무시됩니다. 이 점을 유의하세요!

 

var formData = new FormData(document.getElementById('폼 아이디'));

이렇게 선택하면 알아서 폼의 내용들의 formData 객체 안에 들어갑니다. 편리하죠?

append로 넣을 수만 있는 게 아니라 내용물을 확인할 수도 있습니다. 위의 코드와 이어집니다.

 

formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // orange
formData.getAll('item'); // ['orange', 'melon']

formData에 이제 값을 지워봅시다. delete 메소드를 사용하면 됩니다.

append와 비슷한 set 메소드도 있습니다. set과 append의 차이점은 set도 추가를 해주기는 하지만, 기존 키가 있으면 그 값을 모두 덮어씌워버립니다. 위의 item에 대한 값이 orange와 melon이었는데 apple을 set하는 순간 item 값이 apple 하나로 덮어씌워졌습니다.

이상으로 FormData의 API에 대해 알아봤습니다. FormData에 이미지를 담고 싶으면

formData.append('img', document.getElementById('파일 인풋').files[0])