HTML/DOM. Form Data

보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다.

주로 JSON구조 (key-value)값 데이터를 전송함.

 

But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함.

>> input type="file"

 

 

 

___

 

<input type="file"> - HTML: Hypertext Markup Language | MDN

파일 입력 칸의 value 특성은 선택한 파일의 경로를 나타내는 DOMString을 담습니다.
사용자가 여러 개의 파일을 선택한 경우 value는 파일 목록의 첫 번째 파일을 가리키며,
나머지 파일은 요소의 HTMLInputElement.files 속성으로 가져올 수 있습니다.

** input type="file"의 속성

accept	허용하는 파일 유형을 나타냄
capture	이미지 or 비디오 데이터 캡쳐시 방법
files	파일을 나열하는 파일리스트
multiple	여러개 파일 선택 가능

 

___

 

보통의 폼은 제출 버튼을 누르면 action 속성에 지정한 페이지로 이동하면서 데이터를 전송함.

그러나, AJAX는 제출 버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고,

페이지 전환 없이 데이터를 전송함.

 

>> 페이지 전환 없이 폼 데이터를 제출하고 싶을 때 FormData 객체를 이용함.

 

FormData 객체는 window.FormData 에 위치함.

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

 

FormData 인터페이스의 append 메서드는
FormData 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가합니다.

formData.append(name, value);

new FormData로 새로운 객체를 생성하고,

append 메소드로 키-값 형식으로 하나씩 추가해준다.

>> append는 자식요소를 추가하는 것으로,

같은 키를 가진 값을 여러개 넣을수도 있다.  (덮어쓰기되지 않음.)

 

❗ 값은 문자열로 자동 변환된다. (단, 객체를 넣으면 무시된다.)

 

 

기존 폼이 존재하는 경우엔 new FormData(HTML element)를 하면 된다.

예를 들면, 다음과 같다.

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

 

내용물을 확인할 때에는 formData.has() 메서드를 사용한다. (True/false 반환)

formData.get()으로 직접 값을 가져올 수도 있다.

get으로만 하면 첫번째 일치하는 값만 가져오므로

getAll() 메서드로 전부 가져올 수 있다. (배열로 반환함)

 

formData.append('test', ['hi', 'zero']);       // key-value
formData.get('test'); // hi, zero          // 문자열로 저장됨
formData.delete('test');                  // 삭제
formData.get('test'); // null              // 빈 formData
formData.set('item', 'apple');            // 추가함
formData.getAll('item'); // ['apple']

 

FormData 객체에 값을 추가하는 방법

 

formData.set('key', value)	키 중복시 덮어쓰기됨
formData.append('key', value)	키 중복시 맨 끝에 새로운 값 추가

 

 

 

---

 

formData에 이미지를 담고 싶다면

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

과 같이 해주고, 서버로 formData 자체를 보내면 된다.

(파일이 여러개라면? > 반복문을 사용해서 append를 해줌. 단, 키값은 같아야함.)

키값이 같아야 여러 파일이 같은 키로 업로드된다.

 

 

 

 

 

 

 

---

REFERENCE

 

(HTML&DOM) FormData - AJAX 폼 전송 준비

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!