FormData ऑब्जेक्ट
फ़ॉर्म से मल्टीपार्ट पेलोड बनाइए।
FormData ऑब्जेक्ट, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
FormData क्या है
FormData फ़ॉर्म फ़ील्ड और उनके मानों को दर्शाने वाले कुंजी/मान युग्मों का समूह बनाने वाला ब्राउज़र एपीआई है। यह फ़ाइलों समेत डेटा को सर्वर पर भेजने के लिए पैक करने का मानक तरीका है।
यह multipart/form-data के रूप में एन्कोड होता है, जो बाइनरी अपलोड का समर्थन करता है।
खाली FormData बनाना
एक खाली FormData बनाएँ और append की मदद से फ़ील्ड एक-एक करके जोड़ें।
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));फ़ॉर्म एलिमेंट से बनाना
कन्स्ट्रक्टर में एक <form> एलिमेंट दें और हर नामित इनपुट अपने-आप कैप्चर हो जाएगा। यह इसका सबसे सामान्य उपयोग है।
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append बनाम set
append कुंजी पहले से मौजूद होने पर भी एक मान जोड़ता है, जिससे एक कुंजी के लिए कई मान रखे जा सकते हैं। set उस कुंजी के सभी मौजूदा मानों को बदल देता है।
const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));
data.set('tag', 'only');
console.log(data.getAll('tag'));मान पढ़ना
get किसी कुंजी का पहला मान लौटाता है, getAll सभी मानों को एक सारणी के रूप में लौटाता है, और has मौजूदगी की जाँच करता है।
const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');
console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));फ़ील्ड हटाना
delete किसी कुंजी के सभी मान हटा देता है। भेजने से पहले फ़ील्ड हटाने के लिए यह उपयोगी है।
const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');
data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));एंट्री पर इटरेट करना
FormData पर इटरेट किया जा सकता है। सभी युग्मों पर जाने के लिए entries, keys या values, अथवा for...of लूप का उपयोग करें।
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}फ़ाइलें जोड़ना
append मान के रूप में File या Blob ले सकता है। तीसरा वैकल्पिक आर्ग्युमेंट सर्वर को भेजे जाने वाले फ़ाइल नाम को निर्धारित करता है।
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);multipart/form-data क्यों
FormData मल्टीपार्ट/फ़ॉर्म-डेटा के रूप में सीरियलाइज़ होता है। इसमें एक ही अनुरोध बॉडी में टेक्स्ट फ़ील्ड और बाइनरी फ़ाइल सामग्री, दोनों भेजी जा सकती हैं। इसी कारण फ़ाइल अपलोड के लिए यह सबसे उपयुक्त फ़ॉर्मैट है।
const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');
console.log(data.has('photo'));ऑब्जेक्ट में बदलना
केवल टेक्स्ट वाले सरल फ़ॉर्म के लिए Object.fromEntries FormData को एक सामान्य ऑब्जेक्ट में बदल सकता है। ध्यान रखें कि दोहराई गई कुंजी के लिए इसमें केवल एक मान रहता है।
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);FormData महत्वपूर्ण क्यों है
FormData HTML फ़ॉर्म और नेटवर्क अनुरोधों के बीच सेतु का काम करता है। यह फ़ील्ड और फ़ाइलें एकत्र करता है, दोहराई गई कुंजियों का समर्थन करता है और बाइनरी डेटा को सुरक्षित रूप से एन्कोड करता है। अब आप FileReader की मदद से फ़ाइल सामग्री पढ़ेंगे और फिर FormData को fetch के साथ भेजेंगे।
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);त्वरित जाँच
FormData पर append और set में क्या अंतर है?
पुनरावलोकन: FormData ऑब्जेक्ट
आपने फ़ॉर्म डेटा को पैक करना सीखा:
new FormData(form)नामित इनपुट को अपने-आप कैप्चर करता है।appendदोहराई गई कुंजियों की अनुमति देता है;setउन्हें बदल देता है।get,getAllऔरhasसे पढ़ें;entriesसे इटरेट करें।- यह मल्टीपार्ट/फ़ॉर्म-डेटा के रूप में एन्कोड होता है और फ़ाइलों तथा बाइनरी डेटा का समर्थन करता है।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “FormData ऑब्जेक्ट” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “FormData ऑब्जेक्ट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“FormData ऑब्जेक्ट” में मैं क्या सीखूँगा?
फ़ॉर्म से मल्टीपार्ट पेलोड बनाइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“FormData ऑब्जेक्ट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।