[JQuery]Ajax활용한 파일업로드 FormData

| FormData란 ?

---

이번에는 FormData를 사용하여 <form>태그처럼 파일을 넘겨주는 방식을 알아보겠습니다.

 

• FormData 인터페이스는 XMLHttpRequest.send()로 쉽게 보내질 수 있는 폼 filed와 key / value 쌍을 쉽게 만들 수 있습니다.
• 인코딩 type이 "multipart/form-daata"로 설정 되어 있으면 폼이 사용하는 것과 같은 포맷으로 사용합니다
• contentType,processData 옵션은 false로 설정해야 합니다

※processData란 ? 일반적으로 서버에 전달되는 데이터는 query string 형태로 전달되기 때문에)

ex) http://example.com/over/there?title=Main_page&action=raw

data 파라미터로 전달된 데이터를 jquery 내부적으로 query string으로 만듭니다. 파일 전송의 경우 이를 하지 않아야 하고 설정하는 것이 processData : false 입니다.

 

※contentType란 ? default값이 "application/x-www-form-urlencoded; charset=UTF-8" 입니다.

이를 "multipart/form-data"로 전송이 되게 false로 바꿔주는 역할을 합니다. 

 

 

( ※ IE10 ver 부터 지원 9이하는 지원 X )

// 파일 선택창에서 하나의 파일만 선택 가능
<input name="files" id="fileupload" type="file" />
// 파일 선택창에서 여러개의 파일을 한번에 ( multiple속성 이용 )
<input name="files" id="fileupload" type="file" multiple />

파일은 속성이 readonly이기 때문에 추가,변경이 불가능합니다.

 

 

| 문법

//form 태그가 없는 경우

var formData = new FormData();