106

আপনি কি আমাকে বলতে পারেন যে এতে কী ভুল হয়েছে:

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

ক্রোম 50+ এবং ফায়ারফক্স 39+ (নতুন 44+) এ নতুন:

formdata.entries()( Array.from()ডিবাগিবিলিটির জন্য একত্রিত )
formdata.get(key)
এবং আরও খুব দরকারী পদ্ধতি

আসল উত্তর:

আমি কোনও FormDataবস্তুকে 'ডিবাগ' করতে সাধারণত যা করি তা কেবল এটি (যে কোনও জায়গায়!) প্রেরণ করা হয় এবং ব্রাউজার লগগুলি পরীক্ষা করে (যেমন Chrome ক্রম ডেভলগুলি 'নেটওয়ার্ক ট্যাব)।

আপনার কোনও / একই অ্যাজ্যাক্স কাঠামোর দরকার নেই। আপনার কোনও বিবরণ দরকার নেই। কেবল এটি প্রেরণ করুন:

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

সহজ।

— Rudie
সূত্র

ধন্যবাদ - ফর্মডাটা অবজেক্টটি ক্রোম কনসোলে টাইপ করে পাওয়ার এটি একটি দ্রুত দ্রুত উপায় ছিল।

— ড্যান স্মার্ট

গুগল অনুসারে ক্রোম ভি 50 এ ডেটা পদ্ধতি যুক্ত করা হয়েছিল।

— thdoan

ব্রাউজার লগগুলি যদি সাফারির মতো একটি মোবাইল ব্রাউজার হয় তবে আপনি কীভাবে তাকান? আমি মোবাইলের জন্য বোঝানো একটি ওয়েব অ্যাপ্লিকেশনটিতে ফর্মডাটা অবজেক্টটি ব্যবহার করছি এবং এটি কীভাবে ডিবাগ করা যায় তা বুঝতে পারি না।

— কিউইকম্বম্ব 12

1

@ কিউইকম্বম্ব ১২৩ Formdata.entries()+ Array.from()+ alert()যদি এটি যথেষ্ট আধুনিক হয়, বা মোবাইল ডিবাগিংয়ের

— রুডি

সুতরাং কোন প্রান্ত বা ie 11?

— সুপারউবারডুপার

50

আপনি বলছেন এটি কাজ করছে না। আপনি কি আশা করছেন?

কোনও জিনিস থেকে ডেটা বের করার কোনও উপায় নেই FormData; এটি কেবলমাত্র কোনও XMLHttpRequestঅবজেক্টের সাথে ডেটা প্রেরণের জন্য ( sendপদ্ধতিটির জন্য) উদ্দেশ্যে করা হয়েছে।

প্রায় পাঁচ বছর পরে আপডেট করুন: কিছু নতুন ব্রাউজারে এটি আর সত্য নয় এবং আপনি এখন এতে FormDataকেবল স্টাফিংয়ের পাশাপাশি সরবরাহ করা ডেটা দেখতে পারেন । আরও তথ্যের জন্য গৃহীত উত্তর দেখুন।

— Jesper
সূত্র

20

ঠিক আছে ... এই স্তন্যপান। আমি কেন আমার কনসোলে ফর্মডিটা লগ ইন করতে পারি না? :-( এটি কেবল আমার কাছে কোনও অর্থবহ নয়, যেহেতু আমি ভেবেছিলাম এটি একটি সাধারণ বিষয়

— নেটজাফিন

12

@ নেটজাফিন: ফায়ারব্যাগ এবং ক্রোমের পরিদর্শক উভয়ই আপনাকে এক্সএইচআর অনুরোধে প্রেরিত অনুরোধের প্যারামিটারগুলি দেখতে দেয় যতক্ষণ আপনি নেটওয়ার্ক ট্যাবটি খুলেছেন এবং লগিং শুরু করেছেন, সুতরাং আপনার এটির পক্ষে সক্ষম হওয়া উচিত। আপনি এমন একটি মোড়কের বস্তুও তৈরি করতে পারেন যা ক্ষেত্রগুলিতে লগ করে এবং ফর্মড্যাটাতে সংযোজন করে এবং তারপরে মানগুলির জন্য এটি পরীক্ষা করে দেখুন (মোড়কের বস্তুর পরিবর্তে অভ্যন্তরীণ ফর্মডাটা প্রেরণ করতে ভুলে যাবেন না)।

— জেস্পার

1

কমপক্ষে, আমি কি পরীক্ষা করতে পারি যে formdataবস্তুর ভিতরে কোনও ফাইল রয়েছে?

— মার্সেলো বারবোসা

1

@ মার্সেলো বারবোসা: মনে হয় না আপনি এর থেকে কোনও তথ্য পেতে পারেন information আপনাকে কেবল এই তথ্যটি নিজের কাছে রাখতে হবে।

— জেস্পার

@ জেস্পারের নির্দেশিত হিসাবে আপনি বিকাশকারী সরঞ্জামগুলির নেটওয়ার্ক ট্যাব ট্যাবে প্রেরিত এক্সএইচআর অনুরোধটি যাচাই করতে পারেন, সেখানে প্যারাম বিকল্প রয়েছে যা আপনাকে পোষ্ট অনুরোধের পাঠানো সামগ্রীটি দেখতে দেয়। এছাড়াও প্রতিক্রিয়া।

— অনিরুধ

23

প্রথম দিকে আমারও একই সমস্যা হচ্ছিলো। আমি একটি চিত্র আপলোড করতে আমার সমস্ত ইনপুট ফাইলগুলি ধরতে ফর্মডেটা ব্যবহার করার চেষ্টা করছিলাম, তবে একই সাথে আমি সার্ভারের সাথে প্রেরিত তথ্যে একটি সেশন আইডি যুক্ত করতে চাইছিলাম। এই সমস্ত সময়, আমি তথ্য সংযোজন দ্বারা ভেবেছি, আপনি বস্তু অ্যাক্সেস দ্বারা সার্ভারে এটি দেখতে সক্ষম হবে। আমি ভৃল ছিলাম. আপনি যখন ফর্মডাটাতে যুক্ত হন, সার্ভারে সংযুক্ত তথ্য চেক করার উপায়টি একটি সাধারণ $_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);
        }
    });
});

তারপরে পিএইচপি:

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

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

— CodeGodie
সূত্র

17

আপনি যদি ক্রোমে থাকেন তবে আপনি পোস্ট ডেটা চেক করতে পারেন

পোস্টের ডেটা কীভাবে চেক করবেন তা এখানে

নেটওয়ার্ক ট্যাবে যান
আপনি যে লিঙ্কে পোস্ট ডেটা প্রেরণ করছেন তা সন্ধান করুন
এটিতে ক্লিক করুন
শিরোনামগুলিতে, আপনি পোস্ট ডেটা চেক করতে অনুরোধ পেলোড চেক করতে পারেন

ক্রোমের ডেভটুলগুলি

— 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 ("কী", "মান") কাজ করছে না

প্রতিক্রিয়া সংস্করণ

দৃশ্য