حول formdata
أضافت XMLHTTPREQUEST المستوى 2 واجهة جديدة --- FormData
باستخدام كائن FormData ، يمكنك محاكاة سلسلة من عناصر التحكم في النماذج مع بعض أزواج القيمة الرئيسية من خلال JS. يمكنك استخدام طريقة SEND () لـ XMLHTTPREQUEST لتقديم النماذج بشكل غير متزامن. بالمقارنة مع Ajax العادية ، فإن أكبر ميزة لاستخدام FormData هي أنه يمكنه تحميل الملفات الثنائية بشكل غير متزامن.
كائن formdata
يمكن أن يشكل كائن FormData QueryString لاسم وقيمة جميع عناصر النماذج وإرساله إلى الخلفية. يمكن أن يؤدي استخدام كائنات formdata إلى تقليل عبء عمل خياطة QueryString عند التقديم باستخدام Ajax
QueryString هي سلسلة استعلام ، سلسلة استعلام HTTP من عناوين URL؟ القيمة التالية تحدد
عندما يرسل النموذج الموجود في الصفحة بيانات مطلوبة إلى الصفحة في وضع GET (إذا كانت البيانات تحتوي على أحرف غير آمنة ، يقوم المتصفح أولاً بتحويلها إلى أحرف سداسية عشرية ثم ينقلها ، مثل عندما يتم تحويل المساحة إلى ٪ 20) ، يضع خادم الويب البيانات المطلوبة إلى متغير بيئة يسمى Query_String. تتمثل طريقة request.querystring في إخراج القيمة المقابلة من متغير البيئة هذا واستعادة الأحرف التي تم تحويلها إلى سداسي عشري.
تحميل الملفات والصور باستخدام FormData
قم بإنشاء كائن فارغ formData ، ثم إضافة مفتاح/قيمة باستخدام طريقة إلحاق
var formData = new FormData () ؛ formdata.append ("name" ، "Zhang San") ؛إذا كان هناك بالفعل نموذج نموذج ، احصل على كائن النموذج وقم بتمريره إلى كائن FormData كمعلمة
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <body> <form name = "form1" id = "form1"> <input id = "file" type = "file" name = "/input> </form> form = document.getElementById ("form1") ؛ var formData = new formData (form) ؛ </script> </body> </html>يمكنك الاستمرار في إضافة أزواج جديدة ذات قيمة رئيسية بناءً على بيانات النموذج الموجودة.
var formData = new FormData () ؛ formdata.append ("Age" ، "21") ؛تحميل الملفات باستخدام كائنات formdata
var formdata = new formData ($ ("#form1"). [0]) ؛ // get file method One // var formData = new FormData () ؛ //formdata.append("file "، $ ("#file ") [0] .files [0]) ؛ // الحصول على طريقة الملف $ $ .ajax ({type: 'post' ، url: '#' لا تقم بتعيين نجاح رأس الطلب من نوع المحتوى: وظيفة () {} خطأ: الدالة () {}})ما سبق هو الوصف الكامل لطريقة استخدام FormData لتحميل الملفات والصور في JS التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي!