كائن FormData

اكتشف ما هو كائن FormData وكيفية استخدامه

الFormDataيتم استخدام الكائن للاحتفاظ بقيم النموذج في بنية بيانات أزواج المفتاح والقيمة.

تقوم بإنشاء ملفFormDataكائن بهذه الطريقة:

const fd = new FormData()

بمجرد حصولك على العنصر ، يمكنك استدعاء إحدى طرقه:

  • append()لإضافة قيمة إلى الكائن باستخدام المفتاح المحدد. إذا كان المفتاح موجودًا بالفعل ، تتم إضافة القيمة إلى هذا المفتاح ، دون حذف المفتاح الأول
  • delete()يحذف زوج قيمة مفتاح
  • entries()يعطي كائن تكراري يمكنك تكراره لسرد أزواج القيمة الرئيسية المستضافة
  • get()الحصول على القيمة المرتبطة بمفتاح. إذا تم إلحاق أكثر من قيمة ، فإنها تُرجع القيمة الأولى
  • getAll()الحصول على جميع القيم المرتبطة بمفتاح
  • has()يعود صحيحًا إذا كان هناك مفتاح
  • keys()يعطي كائن تكراري يمكنك تكراره لسرد المفاتيح المستضافة
  • set()لإضافة قيمة إلى الكائن باستخدام المفتاح المحدد. إذا كان المفتاح موجودًا بالفعل ، يتم استبدال القيمة
  • values()يعطي كائن تكراري يمكنك تكراره لسرد القيم المستضافة

يعد كائن FormData جزءًا منXMLHttpRequest 2المواصفات. إنه متاح فيجميع المتصفحات الحديثةلكن ضع في اعتبارك أن إصدارات IE السابقة لـ 10 لا تدعمها.

فيما يلي مثال على استخدام FormData لإرسال محتوى ملف باستخدام اتصال XHR:

<input type="file" id="fileUpload" />
const sendFile = file => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } } fd.append(‘myFile’, file) xhr.send(fd) }

const handleImageUpload = event => { const files = event.target.files sendFile(files[0]) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

يمكن استخدام هذا المقتطف بدلاً من ذلك لإرسال ملفات متعددة:

<input type="file" id="fileUpload" multiple />
const sendFiles = files => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } }

for (let i = 0; i < files.length; i++) { fd.append(files[i].name, files[i]) }

xhr.send(fd) }

const handleImageUpload = event => { sendFiles(event.target.files) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })


المزيد من دروس المتصفح: