FormData 기본

FormData API

보통 서버에서 데이터를 전송할 때 <form>태그를 이용해 input 값을 서버에 전송한다.

자바스크립트에서는 이를 FormData() 클래스를 이용하여 똑같이 스크립트로도 전송할 수 있다는 것이 핵심💫💫

즉, FormData란 HTML이 아닌 자바스크립트에서 폼 데이터를 다루는 객체라고 보면 된다. 

그리고 HTML에서 Submit 제출은, 자바스크립트에서 Ajax로 제출한다고 보면 된다.

---

FormData의 활용

HTML이 아닌 굳이 자바스크립트에서 form 전송을 하는 이유는??

• 이미지 같은 멀티미디어 파일을 페이지 전환 없이 비동기로 제출하고 싶을 때
• 자바스크립트로 좀 더 타이트하게 폼 데이터를 관리하고 싶을때

 

//새로운 폼 객체 생성
let formData = new FormData();

//폼 데이터를 스크립트로 추가
formData.append('name', 'coorin');  //<input name='name' value='coorin'>
formData.append('item', 'hi');      //<input name='item' value='hi'>
formData.append('item', 'hello');   //<input name='item' value='hello'>

//HTML에 form 태그를 jQuery, Javascript에서 가져올 경우

//jQuery
let formData1 = new FormData($("#formId"));

//Javascript
let formData2 = new FormData(document.getElementById("formId"));

폼 객체에 append() 메소드로 key와 value값을 차례로 추가해주면, 곧 input 태그에 값을 입력하는 것과 같은 효과를 가짐.

값은 무조건 "문자열"로 자동 변환 됨. 객체나 배열 같은 복잡한 데이터는 넣을 수 없음 : 다른 데이터 타입은 무시. 문자열로 자동 변환

---

FormData의 기본 메소드

formData.append(name, value)
// form의 name과 value를 필드에 추가
// input의 name 속성과 value 입력값 역할을 한다고 생각하면 됨
// append 함수로 추가시, name의 중복이 가능함

formData.append(name, blob, fileName)
// input type이 file인 경우에 사용
// fileName은 file의 이름에 해당

formData.delete(name)
//주어진 name으로 필드를 제거함

formData.get(name);
//주어진 name의 해당하는 필드 value를 반환

formData.getAll(name);
// 주어진 name에 해당하는 필드의 모든 value를 반환함 (배열형식으로 가져옴)

formData.has(name);
// 주어진 name에 해당하는 필드가 있을 경우 true, 없으면 false를 반환함

formData.set(name, value);
formData.set(name, blob, fileName)
// set도 append처럼 필드를 추가함
// 그러나 기존 key가 있으면 key 값에 해당하는 value 값이 새로 정의됨

※ blob(Binary Large Object) : 바이너리 형태로 큰 객체를 저장함. 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용함. blob은 사실 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 포인터 객체 (다음번에 좀 더 자세히 알아봐야겠다..!)

---

FormData 값 콘솔에 출력하기

지난번에 파일을 자바스크립트로 등록했을 때에도 말했었지만, FormData는 단순히 console.log로 찍어서 볼수가 없다.

왜냐하면 자바스크립트에서 FormData 객체란 단순한 객체가 아니며 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태이기 때문이다. 

따라서 FormData의 값을 출력하기 위해선 form문으로 순회하여 뽑을 수 있다.

//폼 객체 key 값 뽑기
let keys = formData.keys();
for(const key of keys){
    console.log(key);
}

//폼 객체 value 값 뽑기
let values = formData.values();
for(const value of values){
    console.log(value);
}

//폼 객체 key와 value 값 뽑기
let entries = formData.entries();
for(const key of entries){
    console.log(key[0] + ',' + key[1]); 
}

//마지막 결과값
name,coorin
item,hi
item,hello