보통은 ajax로 폼(form 태그)전송할 일이 거의 없습니다. 주로 json구조로 키-값 데이터를 전송하니까. 하지만 폼 전송이 필요한 경우가 있다. 바로 이미지!! ajax로 업로드할 경우다.
물론 이미니는 base62나 buffer, 이진 데이터 형식으로 서버로 전송해도 된다고 하다. 하지만 가장 자연스러운것은 폼을 통해 업로드 하는것이다. input[type=file]을 사용해서다.
그런데 폼과 ajax를 같이 쓴다는것은 좀 이상함. 보통 폼 하면 제출 버튼을 누르면 action송성에 지정한 페이지로 이동하면서 데이터를 전송하니까. ajax는 반대로 제출버튼을 누르면 기본 폼 동작은
e.preventdefault()로 멈추고, 페이지 전환 없이 데이터를 전송한다.
페이지 전환없이 폼 데이터를 제출하고 싶을 때 바로 FormData 객체를 사용한다.
FormData객체는 window.FormData에 위치한다.
let formData = newData();
formData.append('name', 'lalla');
formData.append('item', 'orange');
formData.append('item', 'melon');new FormData()로 새로운 객체를 생성해 주고, append 메소드로 키-값 형식으로 하나씩 추가해주면 되겠다.
같은 키를 가진 값을 여러개 넣을 수도 있다. 덮어 씌워지지 않고 추가된다. 참고로 값은 문자열로 자동변환된다.
숫자를 넣어도 문자열이 되고, 배열을 넣어도 콤마로 구분한 문자열이 된다. 객체는 넣으면 무시되니 이점을 유의하자!
기존 폼이 있는경우에는
let formData = new FormData(document.getElementById('폼 아이디'));이렇게 선택하면 알아서 폼의 내용들의 formData객체 안에 들어간다.
append로 넣을 수만 있는게 아니라 내용물도 확인할 수도 있다.
formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // orange
formData.getAll('item'); // ['orange', 'melon']has 메소드로는 해당하는 키가 존재하는 지 확인할 수 있고요. get 메소드로 직접 가져올 수 있습니다. 유의할 점은 get은 처음 저장한 값 하나만 불러옵니다. 위에서 item 키에 값을 orange와 melon 두 개를 줬습니다. 그런데 get만 하면 orange밖에 뜨지 않습니다. 이 때 getAll 메소드가 있습니다. 해당 키에 매칭되는 값들을 전부 배열로 반환합니다.
var keys = formData.keys();
keys.next(); // { done: false, value: 'name' }
keys.next(); // { done: false, value: 'item' }
keys.next(); // { done: false, value: 'item' }
keys.next(); // { done: true, value: undefined }
var values = formData.values();
values.next(); // { done: false, value: 'lalla' }
values.next(); // { done: false, value: 'orange' }
values.next(); // { done: false, value: 'melon' }
values.next(); // { done: true, value: undefined }
var entries = formData.entries();
entries.next(); // { done: false, value: ['name', 'lalla'] }
entries.next(); // { done: false, value: ['item', 'orange'] }
entries.next(); // { done: false, value: ['item', 'melon'] }
entries.next(); // { done: true, value: undefined }위 코드는 반복자(이터레이터)를 사용한 코드다.
폼데이터으이 키나 값, 또는 키와 값 모두를 쉽게 보여준다. 반복문에 사용하면 좋다.
formData.append('test', ['hi', 'hello']);
formData.get('test'); // hi, hello
formData.delete('test');
formData.get('test'); // null
formData.set('item', 'apple');
formData.getAll('item'); // ['apple']formData에 이제 값을 지워봅시다. delete 메소드를 사용하면 됩니다. append와 비슷한 set 메소드도 있습니다. set과 append의 차이점은 set도 추가를 해주기는 하지만, 기존 키가 있으면 그 값을 모두 덮어씌워버립니다. 위의 item에 대한 값이 orange와 melon이었는데 apple을 set하는 순간 item 값이 apple 하나로 덮어씌워졌습니다.
FormData에 이미지를 담고 싶으면
formData.append('img', document.getElementById('파일 인풋').files[0]);위와 같이 넣어주고 바로 서버로 formData를 보내버리면 된다. 파일이 여러개면 반복문으로 append를 하면되고, 주의할 점은 여러개를 append할때 항상 키값(위에서는 img)은 같아야 여러 파일이 같은 키로 업로드 된다.
출처: 제로초
