console.log나는를 사용하여 그것을 시도 하고 반복했다 for in.

여기 에 FormData에 대한 MDN 참조 가 있습니다.

두 시도 모두이 바이올린에 있습니다.

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

어떤 키가 설정되어 있는지 양식 데이터를 검사하는 방법

업데이트 된 방법 :

2016 년 3 월 현재 최신 버전의 Chrome 및 Firefox는 이제 FormData.entries()FormData 검사를 지원 합니다. 소스 .

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

이것을 지적 해 주신 Ghost Echo 와 rloth 에게 감사드립니다 !

기존 답변 :

이 Mozilla 기사를 살펴본 후 FormData 객체에서 데이터를 가져올 수있는 방법이없는 것 같습니다. AJAX 요청을 통해 전송할 FormData를 빌드하는 데만 사용할 수 있습니다.

나는 또한 같은 질문을하는이 질문을 발견했다 : FormData.append ( "key", "value") is not working .

이 문제를 해결하는 한 가지 방법은 일반 사전을 작성한 다음 FormData로 변환하는 것입니다.

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

일반 FormData 오브젝트를 디버그하려는 경우 네트워크 요청 콘솔에서 검사하기 위해 전송할 수도 있습니다.

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

짧은 답변

console.log(...fd)

더 긴 답변

raw body가 어떻게 보이는지 검사하려면 Response 생성자 (fetch API의 일부)를 사용할 수 있습니다

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

일부 항목은 각 항목 항목을 기록하도록 제안하지만 console.log여러 인수
console.log(foo, bar)
를 사용할 수도 있습니다. 여러 인수 를 사용하려면 apply메소드를 사용하여 다음 과 같이 호출 할 수 있습니다 console.log.apply(console, array).
그러나 스프레드 연산자 와 반복자를 사용 하여 인수를 적용하는 새로운 ES6 방법이 있습니다
console.log(...array).

이를 아는, 그리고 FormData 두 배열의가있다는 사실 Symbol.iterator그 위에 루프를 가진, 또는 전화없이 그냥 간단하게이 작업을 수행 할 수있는 그것의 프로토 타입 방법 .entries()반복자의 보류를 얻을 수를

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)

나는 formData.entries()방법을 사용한다 . 모든 브라우저 지원에 대해 잘 모르겠지만 Firefox에서는 제대로 작동합니다.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries 에서 가져옴

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

이 또한 formData.get()및 formData.getAll()넓은 브라우저를 지원하지만, 단지 값이 아닌 키를 가지고. 자세한 내용은 링크를 참조하십시오.

어떤 경우에는 다음을 사용합니다.

for(var pair of formData.entries(){... 

불가능하다.

이 코드를 대신 사용했습니다.

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

매우 똑똑한 코드는 아니지만 작동합니다 ...

도움이 되길 바랍니다.

Angular 5+ (TypeScript 2.4.2 사용)에서 작업 할 때 다음과 같이 시도했지만 정적 검사 오류를 제외하고 작동하지만 for(var pair of formData.entries())작동하지 않습니다.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

Stackblitz에서 확인

쉬운 방법

각도 8 에서이 코드를 사용했습니다.

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

ES6 + 솔루션 :

양식 데이터의 구조를 보려면

console.log([...formData])

각 키-값 쌍을 보려면

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}

다음은 FormData 객체의 항목을 콘솔에 객체로 기록하는 함수입니다.

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN 문서 .entries()

MDN 문서 .next()및.done

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

FormData::entries()의 인스턴스 를 반환 한다는 것을 이해해야합니다 Iterator.

이 예제 양식을 보자.

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

그리고이 JS 루프 :

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

각도 7에서는 아래 코드 줄을 사용하여 콘솔에 항목이 있습니다.

formData.forEach(entries => console.log(entries));

이미 답변했지만 제출 된 양식에서 쉬운 방법으로 값을 검색하려는 경우 스프레드 구조를 사용하여 새 맵 반복 작성을 작성하여 멋진 구조를 얻을 수 있습니다.

new Map([...new FormData(form)])

에서 typeScript의 angular 6이 코드는 나를 위해 노력하고 있습니다.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

또는 모든 값에 대해 :

console.log(formData.getAll('name')); // return all values

이 기능을 사용해보십시오 :

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

MDN이 제안 은 다음 양식을 :

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

대안 적으로

for (let [key, value] of formData.entries()) {
 console.log(key, ':', value);
}

브라우저 또는 환경이 최신 JavaScript 및 FormData API를 지원하지 않는 경우 ES + Polyfills 추가를 고려하십시오 .

이게 도움이 되길 바란다.