FormData.append()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.

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

FormData.setappend() 의 차이점은 지정된 키가 이미 있으면, FormData.set 은 모든 기존 값을 새 값으로 덮어쓰기를 합니다. 반면 append() 는 기존 값 집합의 끝에 새로운 값을 추가합니다.

참고 : 이 메서드는 Web Worker에서 사용할 수 있습니다.

Syntax

이 메서드에는 두 가지 버전이 있습니다: 매개변수가 두 개인 버전과 세 개인 버전입니다:

js
formData.append(name, value);
formData.append(name, value, filename);

Parameters

name

value 에 포함되는 데이터 필드의 이름입니다.

value

필드의 값입니다. USVString 또는 Blob (File과 같은 sublcass를 포함하여) 일 수 있습니다.

filename Optional

Blob 또는 File 이 두 번째 매개 변수로 전달될 때, 서버에 리포트하는 파일 이름(a USVString)입니다. Blob 객체의 기본 파일 이름은 "blob" 입니다. File 객체의 기본 파일 이름은 파일의 이름이 됩니다.

참고: BlobFormData 객체에 추가할 데이터로 지정하면, "Content-Disposition" 헤더에서 서버에 리포트하는 파일 이름이 브라우저마다 다를 수 있습니다.

Returns

Void.

Example

다음 코드를 따라 빈 FormData 객체를 만듭니다:

js
var formData = new FormData(); // Currently empty

FormData.append를 사용하여 key/value 쌍을 추가할 수 있습니다:

js
formData.append("username", "Chris");
formData.append("userpic", myFileInput.files[0], "chris.jpg");

일반 form 데이터와 마찬가지로 동일한 이름의 여러 값을 추가할 수 있습니다. 예를들면 (그리고 이름에 []를 추가하여 PHP의 명명 규칙과 호환이 가능합니다):

js
formData.append("userpic[]", myFileInput.files[0], "chris1.jpg");
formData.append("userpic[]", myFileInput.files[1], "chris2.jpg");

이 기술을 사용하면 서버에 올라간 결과 데이터가 루프를 도는데 도움이 되는 구조이기 때문에, 이 기술을 사용하면 다중 -파일 업로드를 보다 쉽게 처리할 수 있습니다.

명세서

Specification
XMLHttpRequest
# dom-formdata-append

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
append
filename parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

See also