FormData شئ است که یک سری مقادیر را به صورت key,value برای RequestBody فراهم می آورد. استفاده اصلی آن برای کار با form Element است اما می توان به صورت مستقل هم یک سری داده را با آن انتقال داد . در نهایت این داده ها به شئ XMLHttpRequest پاس داده می گردد جهت ارسال به سمت سرور.

multipart/form-data

این مقدار Http Header Content-Type می باشد که برابر است با فرمت encode کردن داده ها در FormData با فرمت multipart/form-data است. این Content-Type همان نوع فرمتی است که form ها در زمان submit داده ها را با آن فرمت ارسال می کنند و همچنین کلاینت هایی که قصد دارند با یکی از Http Verb های POST , GET به سمت سرور اطلاعات بفرستند و RequestBody به شکل یک آرایه در دسترس داشته باشند.

معمولا زمانی که html form یک سری داده را از طریق پروتکل http ارسال می کنند به یکی از این دو روش داده ها را encode می کنند:

• application/x-www-form-urlencoded
• multipart/form-data

حالت اول – application/x-www-form-urlencoded – که حالت پیش فرض برای html form ها است ، برای encode داده هایی با ساختار رشته است یعنی همه input های ساده غیر از file . در حالت دوم – multipart/form-data-  قرار است امکان ارسال داده ها در قالب فایل و داده های بزرگتر با فرمت non-ASCII characters هم وجود دارد.

نمونه ساختار Request Body را در فرمت انکد  application/x-www-form-urlencoded به شکل زیر است:

username=customer&password=admin

نمونه ساختار Request Body در فرمت انکد multipart/form-data به شکل زیر است :

-----------------------------79214850236589542064161732573
Content-Disposition: form-data; name="username"

customer
-----------------------------79214850236589542064161732573
Content-Disposition: form-data; name="password"

admin
-----------------------------79214850236589542064161732573--

FormData

independent html form

برای استفاده از FormData باید یک شئ از آن بسازیم . اگر قرار است با html form با آن کار کنیم لازم است که به عنوان constructor به آن form element node را پاس بدهیم. در صورتی که بخواهیم به صورت مستقل از یک html form این داده ها را ارسال کنیم می توانیم با استفاده از متد های آن لیست داده ها را برای آن set کنیم.

const fd = new FormData()
fd.append('username','asabagh')
fd.append('password','admin')

همچنین می توان یک فایل را هم چه به صورت دریافت از یک input و چه به صورت ساخت Blob به آن افزود:

var blob = new Blob(['hello world, it work'],{type: 'plain/text'})
fd.append('resume',blob)

var profile = document.querySelector('#profile').files[0]
fd.append('profile',profile)

در نهایت می توان آن را به عنوان Request Body به XMLHttpRequest ارسال کرد:

const request = new XMLHttpRequest()
request.open('POST','server.php')
request.send(fd)

در این ساختار می توان به صورت مستقل از html form یک سری داده را تنظیم کرد و به سمت سرور انتقال داد.

FormData & html form element

در این روش می توان به لیست داده های ارسال شده توسط فرم را با پاس داده html form element node به سازنده FormData تنظیم کرد و برای ارسال به سرور در قالب Request Body ارسال کرد. دقت داشته باشید که داده های ارسالی در قالب آرایه POST , GET , … در سمت سرور قابل دسترس خواهد بود.

e.preventDefault()
var formElement = document.forms.namedItem('login')
var fd = new FormData(formElement)

FormData Event

زمانی که یک فرم به FormData پاس داده می شود یک Event اجرا می شود که می توان از آن برای تحلیل لیست داده ها استفاده کرد . این event در قالب های زیر قابل تعبیه است (چه به عنوان EventListener , Event Attribute)

addEventListener('formdata', (event) => {});
onformdata = (event) => { };

به طور مثال در فرم زیر در زمان submit فرم تابع requestXHR اجرا می گردد . در زمانی که فرم به عنوان ورودی به FormData داده می گردد تابع formDataRuned اجرا می گردد.

<form action="" method="post" name="login" onsubmit="requestXHR(event)" onformdata="formDataRuned(event)">
   <input type="text" name="username" value="">
   <input type="password" name="password" value="">
   <input type="submit" name="send" value="submit">
</form>

در script.js ما این دو Event را به این شکل مدیریت کردیم:

var requestXHR = function(e){
   e.preventDefault()
   var formElement = document.forms.namedItem('login')
   var fd = new FormData(formElement)
}

function formDataRuned(event){

   var fd = event.formData
   for(let value of fd.values()){
      console.log(value)
   }
   //const request = new XMLHttpRequest() ...
}

در مثال بالا می توان در زمان مدیریت FormData Event داده ها را احراز یا اعتبار سنجی کنیم و بعد درخواست را ارسال کنیم . همچنین می توان این متد را به عنوان یک Route برای تمامی فرم ها در نظر بگیریم.

FormData jQuery

در زمان استفاده از FormData با متد های ارسال درخواست در jquery باید دو پارامتر processData , contentType را برابر false قرار بدهیم. این عمل به این دلیل است که به صورت پیش فرض داده های در نظر گرفته شده برای ajax data با فرمت json در نظر گرفته شده است .

$.ajax({
  url: "server.php",
  type: "post",
  data: fd,
  processData: false,
  contentType: false,
  success: function(respons){
    console.log(respons)
  }
});

FormData Methods

لیست متد های FormData Object از قرار زیر است:

fd.append('token','5125fsaktqt50lk')

FormData.delete()

for(let pair of fd.entries()){
  console.log(pair) //Array [ "password", "admin" ]
}

FormData.get()

formData.append('username', 'Chris');
formData.append('username', 'Bob');

formData.getAll('username'); // Returns ["Chris", "Bob"]

FormData.has()

for(let key of fd.keys()){
  console.log(key)
}

FormData.set()

for(let value of fd.values()){
  console.log(value)
}