ফর্মডাটাতে অ্যারে সংযুক্ত করে এজেএক্সের মাধ্যমে প্রেরণ করুন

Question

আমি অ্যারে, টেক্সট ক্ষেত্র এবং ফাইলগুলির সাথে একটি বহুগুণ ফর্ম জমা দেওয়ার জন্য এজ্যাক্স ব্যবহার করছি।

আমি প্রতিটি ভিএআরটিকে মূল তথ্য হিসাবে সংযুক্ত করি

var attachments = document.getElementById('files'); 
var data= new FormData();

for (i=0; i< attachments.files.length; i++){
    data.append('file', attachments.files[i]);
    console.log(attachments.files[i]);

    data.append ('headline', headline);
    data.append ('article', article);
    data.append ('arr', arr);
    data.append ('tag', tag);

তারপরে আমি এসএইচএল ডিবিতে সঞ্চয় করতে কোনও পিএইচপি ফাইলে প্রেরণে এজাক্স ফাংশনটি ব্যবহার করি।

$.ajax({    
    type: "post",
    url: 'php/submittionform.php',
    cache: false,
    processData: false,
    contentType: false,
    data: data,
    success: function(request) {$('#box').html(request); }
})

কিন্তু পিএইচপি দিকে, arrচলক, যা একটি অ্যারে একটি স্ট্রিং হিসাবে উপস্থিত হয়।

আমি যখন ফর্ম ডেটা হিসাবে এজ্যাক্স সহ এটি প্রেরণ $.POSTকরি না তবে পিএইচপি পাশের একটি অ্যারের হিসাবে আমি সহজ বিকল্পটি ব্যবহার করি তবে আমি ফাইলগুলিও প্রেরণ করতে পারি না।

কোন সমাধান?

Answer 1

আপনার কাছে বেশ কয়েকটি বিকল্প রয়েছে:

এটিকে একটি JSON স্ট্রিংয়ে রূপান্তর করুন, তারপরে এটি পিএইচপিতে পার্স করুন (প্রস্তাবিত)

জাতীয়

var json_arr = JSON.stringify(arr);

পিএইচপি

$arr = json_decode($_POST['arr']);

---

অথবা @ কিউরিওসের পদ্ধতিটি ব্যবহার করুন

মাধ্যমে একটি অ্যারে প্রেরণ FormData।

---

সুপারিশ করা হয় না: এর সাথে ডেটা সিরিয়াল করুন, তারপরে পিএইচপি-তে deserialize করুন

জাতীয়

// Use <#> or any other delimiter you want
var serial_arr = arr.join("<#>"); 

পিএইচপি

$arr = explode("<#>", $_POST['arr']);

Comments

সমস্যাটি হ'ল অ্যারেটিতে ফাঁকা স্থান এবং বিরাম চিহ্ন সহ REAL পাঠ্যের লাইন থাকে। আমি এটা গোলযোগ করতে চাই না।

— শাল্টজ

আপনি যখন এনকোড করে JSON এর সাথে পার্স করবেন তখন ডেটা হারাবে না। একবার চেষ্টা করে দেখুন;)

— রিচার্ড ডি উইট

আপনি যদি স্বয়ংক্রিয় ম্যাপিং বা অনুরূপ অন্য কোনও কিছু নিয়ে এসপ নেট ব্যবহার করছেন, তবে @ জরুরী উত্তরটি আপনার প্রয়োজন।

— মার্টন কল

@ রিচার্ড ডি উইট আপনার কাছে যদি এই জাতীয় ফাইল বা ফর্মডাটা ডেটা থাকে তবে আপনি এগুলিকে json.stringfy এ হারিয়ে ফেলবেন

— মোহসেন

আমি স্ট্রিংযুক্ত আরও ভাল, সহজ পছন্দ করি। আপনার [অ্যারে] ব্যবহার করে অ্যারে পাস করার জন্য কিছু ধরণের পুনরাবৃত্তি করা দরকার [তবে তবে সেই পদ্ধতিতে কী করা যায় তা জেনে রাখা ভাল।

— চপনাট

Answer 2

আপনি FormDataএইভাবে একটি অ্যারে প্রেরণ করতে পারেন :

var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
    formData.append('arr[]', arr[i]);
}

সুতরাং আপনি arr[]সাধারণ HTML ফর্মটি দিয়ে যেমন করেন তেমনভাবে লিখতে পারেন । পিএইচপি ক্ষেত্রে এটি কাজ করা উচিত।

আপনি এই নিবন্ধটি দরকারী খুঁজে পেতে পারেন: কোয়েরি স্ট্রিংয়ের মধ্যে একটি অ্যারে কীভাবে পাস করবেন?

Comments

@Oleg লিখতে দরকারই বা কী arr[]মধ্যে formData.append('arr[]', arr[i]);? কেন arrসঠিক নয় ? আমি উভয় চেষ্টা কিন্তু শুধুমাত্র arr[]কাজ।

— টোটোরো

@ টোটারো কারণ arrআপনার প্রতিটি লুপের পুনরাবৃত্তির ক্ষেত্রে এই মানটি পুনরায় সংজ্ঞায়িত করতে হবে এবং শেষ পর্যন্ত চূড়ান্ত মানটি শেষ অ্যারের উপাদানের সমান হবে তবে পুরো অ্যারে নয়

— ওলেগ

@ ওলেগ যদি নতুন সংজ্ঞা দেওয়া হয় তবে এর মধ্যে আলাদা কী arr[], কেন arr[]নতুন সংজ্ঞা দেওয়া হয়নি? arr[]এটিও একটি স্ট্রিং। এবং যখন উভয় তন্ন তন্ন পরীক্ষা arrকিংবা arr[]আমার ক্ষেত্রে পুনরায় সংজ্ঞায়িত করা হয়। আমি একই কী কিন্তু ভিন্ন মান সহ ফর্মডাটাতে একাধিক অ্যারে পেয়েছি। সুতরাং আমি arrমান 1এবং অন্য arrসঙ্গে পেয়েছিলাম 2।

— টোটোরো

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

— ওলেগ

যদি কেউ অবজেক্টগুলির একটি অ্যারে পোস্ট করতে চাইছেন তবে আপনি এই উত্তরটি নিম্নরূপে প্রসারিত করতে পারেনfor (var i = 0; i < myArr; i++) { var myItemInArr = myArr[i]; for (var prop in myItemInArr) { fileData.append(`myArr[${i}][${prop}]`, myItemInArr[prop]); } }

— এডকওয়ার্টি

Answer 3

এটি একটি পুরানো প্রশ্ন তবে আমি সম্প্রতি ফাইলগুলির সাথে অবজেক্টগুলি পোস্ট করার ক্ষেত্রে এই সমস্যায় পড়েছি। আমার কোনও ऑब्जेक्ट পোস্ট করতে সক্ষম হওয়া দরকার, সন্তানের বৈশিষ্ট্যগুলির সাথে যা বস্তু এবং অ্যারেও ছিল।

নীচের ফাংশনটি কোনও অবজেক্টের মধ্য দিয়ে চলবে এবং সঠিক ফর্মডাটা অবজেক্ট তৈরি করবে।

// formData - instance of FormData object
// data - object to post
function getFormData(formData, data, previousKey) {
  if (data instanceof Object) {
    Object.keys(data).forEach(key => {
      const value = data[key];
      if (value instanceof Object && !Array.isArray(value)) {
        return this.getFormData(formData, value, key);
      }
      if (previousKey) {
        key = `${previousKey}[${key}]`;
      }
      if (Array.isArray(value)) {
        value.forEach(val => {
          formData.append(`${key}[]`, val);
        });
      } else {
        formData.append(key, value);
      }
    });
  }
}

এটি নিম্নলিখিত জসনকে রূপান্তর করবে -

{
  name: 'starwars',
  year: 1977,
  characters: {
    good: ['luke', 'leia'],
    bad: ['vader'],
  },
}

নিম্নলিখিত ফর্মডাটাতে

 name, starwars
 year, 1977
 characters[good][], luke
 characters[good][], leia
 characters[bad][], vader

Comments

এটি আমার পক্ষে কার্যকর ছিল, কেবলমাত্র পরিমার মধ্যে মানের জন্য স্ট্রিং (মান) প্রয়োগ করতে হবে (অন্যথায় এটি সত্য / মিথ্যাতে ব্যর্থ হয়)। এছাড়াও এটি অন্যথায় (value !== null) && formData.append(key, value)পরিবর্তে হওয়া উচিত formData.append(key, value)অন্যথায় এটি নাল মানগুলিতে ব্যর্থ হয়

— আলেকজান্ডার

Answer 4

প্রকারের সংস্করণ:

export class Utility {      
    public static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
        let formData = form || new FormData();
        let formKey;

        for (let propertyName in model) {
            if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
            let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
            if (model[propertyName] instanceof Date)
                formData.append(formKey, model[propertyName].toISOString());
            else if (model[propertyName] instanceof Array) {
                model[propertyName].forEach((element, index) => {
                    const tempFormKey = `${formKey}[${index}]`;
                    this.convertModelToFormData(element, formData, tempFormKey);
                });
            }
            else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))
                this.convertModelToFormData(model[propertyName], formData, formKey);
            else
                formData.append(formKey, model[propertyName].toString());
        }
        return formData;
    }
}

ব্যবহার:

let formData = Utility.convertModelToFormData(model);

Comments

দুর্দান্ত কাজ, সুপার দরকারী: ডি

— কসিমো চেলিনী

Answer 5

ফর্মডাটাতে সমস্ত ধরণের ইনপুট যুক্ত করুন

const formData = new FormData();
for (let key in form) {
    Array.isArray(form[key])
        ? form[key].forEach(value => formData.append(key + '[]', value))
        : formData.append(key, form[key]) ;
}

Answer 6

আপনার যদি নেস্টেড অবজেক্টস এবং অ্যারে থাকে তবে ফর্মডাটা অবজেক্টকে পপুলেশন করার সেরা উপায়টি পুনরাবৃত্তি ব্যবহার করছে using

function createFormData(formData, data, key) {
    if ( ( typeof data === 'object' && data !== null ) || Array.isArray(data) ) {
        for ( let i in data ) {
            if ( ( typeof data[i] === 'object' && data[i] !== null ) || Array.isArray(data[i]) ) {
                createFormData(formData, data[i], key + '[' + i + ']');
            } else {
                formData.append(key + '[' + i + ']', data[i]);
            }
        }
    } else {
        formData.append(key, data);
    }
}

Answer 7

সাধারণ মানগুলির অ্যারেযুক্ত মডেলটির জন্য বৈধ পরবর্তী সংস্করণ:

function convertModelToFormData(val, formData = new FormData(), namespace = '') {
    if((typeof val !== 'undefined') && (val !== null)) {
        if(val instanceof Date) {
            formData.append(namespace, val.toISOString());
        } else if(val instanceof Array) {
            for(let element of val) {
                convertModelToFormData(element, formData, namespace + '[]');
            }
        } else if(typeof val === 'object' && !(val instanceof File)) {
            for (let propertyName in val) {
                if(val.hasOwnProperty(propertyName)) {
                    convertModelToFormData(val[propertyName], formData, namespace ? namespace + '[' + propertyName + ']' : propertyName);
                }
            }
        } else {
            formData.append(namespace, val.toString());
        }
    }
    return formData;
}

Answer 8

@ ইয়্যাকওয়াই উত্তর সংক্ষিপ্ত পুনরাবৃত্তি সংস্করণের উপর ভিত্তি করে:

function createFormData(formData, key, data) {
    if (data === Object(data) || Array.isArray(data)) {
        for (var i in data) {
            createFormData(formData, key + '[' + i + ']', data[i]);
        }
    } else {
        formData.append(key, data);
    }
}

ব্যবহারের উদাহরণ:

var data = {a: '1', b: 2, c: {d: '3'}};
var formData = new FormData();
createFormData(formData, 'data', data);

প্রেরিত ডেটা:

data[a]=1&
data[b]=2&
data[c][d]=3