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

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

메모: 이 메서드는 웹워커(Web Workers)에서도 사용할 수 있습니다.

Syntax

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

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 객체를 만듭니다:

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

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

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

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

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

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

Specifications

Specification Status Comment
XMLHttpRequest
The definition of 'append()' in that specification.
Living Standard Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support7 Yes41102125
append with filename Yes Yes22 Yes ? Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support33 ? Yes4112 ? ?
append with filename ? ? ?22 ? ? ?

1. Prior to Firefox 7, specifying a Blob as the data to append to the object, the filename reported in the Content-Disposition HTTP header was an empty string, resulting in errors on some servers. Starting with Firefox 7, the filename blob is sent.

2. With the "Include local directory pass when uploading files to a server" option enabled, IE will change the filename inside the Blob on the fly. To have direct control of the sent filename, the developer should send the filename as the third parameter value, i.e. formData.append(name, value, filename).

3. XHR in Android 4.0 sends empty content for FormData with blob.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: DeadIntegral
최종 변경자: DeadIntegral,