107

क्या आप मुझे बता सकते हैं कि इसमें क्या गलत है:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

मेरा आउटपुट इस तरह दिखता है, मुझे मेरी "कुंजी" - "मूल्य" जोड़ी नहीं मिल सकती है

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

मैं समझ नहीं सकता! कल इसने इतनी अच्छी तरह से काम किया, और आज मेरे सिर ने इतनी बार कीबोर्ड को क्रैश कर दिया! फ़ायरफ़ॉक्स, क्रोम, दोनों समान: /

javascript html form-data

— netzaffin
स्रोत

127

Chrome 50+ और फ़ायरफ़ॉक्स 39+ में नया (सम्मान 44+):

formdata.entries()( Array.from()डिबगबिलिटी के लिए गठबंधन करें )
formdata.get(key)
और अधिक बहुत उपयोगी तरीके

मूल उत्तर:

मैं आमतौर पर किसी FormDataऑब्जेक्ट को 'डीबग' करने के लिए क्या करता हूं , बस इसे भेजें (कहीं भी!) और ब्राउज़र लॉग की जांच करें (जैसे; क्रोम डेत्सूल 'नेटवर्क टैब)।

आपको अजाक्स ढांचे की जरूरत नहीं है। आपको किसी विवरण की आवश्यकता नहीं है। बस इसे भेजें:

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

आसान।

— Rudie
स्रोत

धन्यवाद - यह क्रोमडा कंसोल में टाइप करके फॉर्मडाटा ऑब्जेक्ट प्राप्त करने के लिए एक उपयोगी त्वरित तरीका था।

— डैन स्मार्ट

Google के अनुसार Chrome v50 में फॉर्मडैट के तरीके जोड़े गए थे।

— थुदान

यदि आप सफारी जैसे मोबाइल ब्राउजर को ब्राउजर लॉग में देखते हैं, तो आप कैसे देखेंगे? मैं मोबाइल के लिए बनाए गए वेब ऐप में फॉर्मडाटा ऑब्जेक्ट का उपयोग कर रहा हूं और यह पता नहीं लगा सकता कि इसे कैसे डीबग करना है।

— kivicomb123

1

@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()अगर यह काफी आधुनिक है, या मोबाइल डिबगिंग में देखें

— रुडी

तो कोई बढ़त या 11?

— सुपरयूपरड्यूपर

50

आप कहते हैं कि यह काम नहीं कर रहा है। आप क्या होने की उम्मीद कर रहे हैं?

FormDataऑब्जेक्ट से डेटा प्राप्त करने का कोई तरीका नहीं है ; यह केवल आपके लिए एक XMLHttpRequestवस्तु ( sendविधि के लिए) के साथ डेटा भेजने के लिए उपयोग करने के लिए है ।

लगभग पांच साल बाद अपडेट करें: कुछ नए ब्राउज़रों में, यह अब सच नहीं है और अब आप इसमें डेटा FormDataभरवाने के अलावा दिए गए डेटा को देख सकते हैं । अधिक जानकारी के लिए स्वीकृत उत्तर देखें ।

— जेस्पर
स्रोत

20

ठीक है ... यह बेकार है। मैं अपने कंसोल में फ़ॉर्मडेटा लॉग क्यों नहीं कर सकता? :-( यह मेरे लिए कोई मतलब नहीं है, क्योंकि मुझे लगा कि यह एक सामान्य वस्तु है

— netzaffin

12

@netzaffin: फायरबग और क्रोम के इंस्पेक्टर दोनों ने आपको XHR अनुरोध में भेजे गए अनुरोध पैरामीटर को तब तक देखने दिया जब तक आपने नेटवर्क टैब खोल दिया और लॉगिंग शुरू नहीं कर दिया, इसलिए आपको उस पर प्राप्त करने में सक्षम होना चाहिए। आप एक रैपर ऑब्जेक्ट भी बना सकते हैं जो फ़ील्ड्स को लॉग करता है और फॉर्मडेटा के लिए संलग्न होता है, और फिर मानों के लिए जाँच करें (रैपर ऑब्जेक्ट के बजाय इनर फॉर्मडाटा भेजने के लिए मत भूलना)।

— जेस्पर

1

कम से कम, क्या मैं जांच सकता हूं कि formdataऑब्जेक्ट के अंदर कोई फ़ाइल है?

— MarceloBarbosa

1

@MarceloBarbosa: ऐसा नहीं लगता कि आप इसके बारे में कोई जानकारी प्राप्त कर सकते हैं। आपको बस इसकी जानकारी खुद रखनी होगी।

— जेस्पर

जैसा कि @ जेस्पर द्वारा बताया गया है कि आप डेवलपर टूल के नेटवर्क टैब में भेजे गए एक्सएचआर अनुरोध की जांच कर सकते हैं, वहां पर परमेस विकल्प है जो आपको भेजे गए POST अनुरोध की सामग्री को देखने देता है। प्रतिक्रिया भी।

— अनिरुद्ध

23

आपको शायद वही समस्या हो रही होगी जो मुझे शुरू में हुई थी। मैं एक छवि अपलोड करने के लिए अपने सभी इनपुट फ़ाइलों को हथियाने के लिए फॉर्मडाटा का उपयोग करने की कोशिश कर रहा था, लेकिन साथ ही मैं सर्वर के साथ पारित जानकारी के लिए एक सत्र आईडी को जोड़ना चाहता था। इस बार, मैंने सोचा कि जानकारी को जोड़कर, आप ऑब्जेक्ट तक पहुंचकर इसे सर्वर में देख पाएंगे। मैं गलत था। जब आप FormData के लिए अपील करते हैं, तो सर्वर पर संलग्न जानकारी की जांच करने का तरीका एक सरल $_POST['*your appended data*']क्वेरी द्वारा होता है । इस तरह:

js:

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

उसके बाद php पर:

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

— CodeGodie
स्रोत

17

यदि आप क्रोम में हैं तो आप पोस्ट डेटा की जांच कर सकते हैं

यहां पोस्ट डेटा की जांच करने का तरीका बताया गया है

नेटवर्क टैब पर जाएं
उस लिंक को देखें जिसके लिए आप पोस्ट डेटा भेज रहे हैं
इस पर क्लिक करें
हेडर में, आप पोस्ट डेटा की जांच के लिए अनुरोध पेलोड की जांच कर सकते हैं

क्रोम के DevTools

— madhu131313
स्रोत

8

आप देख सकते हैं कि आपको इसका उपयोग करने की आवश्यकता है console.log(formData.getAll('your key')); घड़ी https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

— योहनाटन येहज़केल
स्रोत

5

प्रपत्र डेटा वेब ब्राउज़र कंसोल में प्रकट नहीं होता है

for (var data of formData) {
  console.log(data);
}

इस तरह से दिखाओ

— दुलंगा हेशान
स्रोत

2

एज ब्राउज़र पर मेरे मामले में:

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

मुझे वही त्रुटि दो

इसलिए मैं उपयोग नहीं कर रहा हूं FormDataऔर मैं सिर्फ एक ऑब्जेक्ट का निर्माण करता हूं

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();

— रमदानोस्की जूली
स्रोत

2

प्रतिक्रिया संस्करण

हेडर के साथ सुनिश्चित करें 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

राय

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />

— 7urkm3n
स्रोत

FormData.append ("कुंजी", "मान") काम नहीं कर रहा है

प्रतिक्रिया संस्करण

राय