HTML5 FormData طريقة مقدمة وملفات التنفيذ على ملف التنفيذ

XMLHTTPREQUEST هي واجهة المتصفح. XMLHTTPrequest هي وسيلة شائعة الاستخدام للتفاعل بين البيانات في المتصفح الحالي. في فبراير 2008 ، تم اقتراح XMLHTTPREQUEST المستوى 2. أنه يمكنك تحميل الملفات الثنائية. دعونا نقدم كيفية تحميل الملفات باستخدام FormData.

انظر أولاً إلى الطريقة الأساسية لـ FormData: FormData Object ، يمكنك تشكيل QueryString لجميع عناصر الجدول والقيمة وتقديمها إلى الخلفية. فقط تمرير النموذج كمعلمة في مُنشئ FormData:

 var form = document.getElementById (form1) ؛

وبهذه الطريقة ، يمكن إرسال FD مباشرة من خلال طريقة Ajax Send () إلى الخلفية.

يتم إنشاء النموذج التالي.

 <name form = form1 id = form1> <p> الاسم: <إدخال النوع = اسم النص = name /> <p> الجنس: <إدخال نوع قيمة الجنس = 2 /p> الإناث < /p> <p> stu-number: <type type = text name = number /> </p> <p> photo: <input type = file name = photo id = phot> </p> <p> <type type = button name = b1 value = إرسال onClick = fsubmit ()/p> </form> <div id = result> </viv>

يقوم الرمز أعلاه بإنشاء نموذج ، ما عليك سوى ملء بعض المعلومات ، وحدد صورة كأفاتار ، قم بتعيين DIV لتخزين نتيجة العائد.

للبسيط ، ما زلنا نستخدم Ajax مغلفة بواسطة jQuery لنقل البيانات إلى الخلفية:

 الدالة fsubmit () {var form = document.getElementById (form1) ؛ Tell Jquery لا تعالج محتوى البيانات: خطأ ، ejson (Response) ؛ + json ['number'] ؛ .html (النتيجة) ؛}}) ؛

Server.php في الرمز أعلاه هو ملف الخادم ، وتلقي طلب AJAX ، وإرجاع نتيجة الاستلام.

 <name $ = $ _ isset ($ _ post ['number']؟ [الاسم] = $ response $ ['الجنس'] '] = false ؛} echo json_encode ($ response) ؛؟>

بعد ملء المعلومات ، انقر فوق "إرسال" للحصول على التأثيرات التالية على الصفحة.

إذا كنت من عشاق JavaScript الأصلي ، فيمكن تحقيق الوظائف أعلاه.

 FORCE FSUBMIT () {var form. (olq المعلومات الشخصية: <br/> الاسم:+json ['name']+<br/> الجنس:+json ['الجنس']+<br/> الرقم:+json ['number'] ؛ <<< br /> Avatar: <img src = ' + json [' photo '] post ، server.php) ؛

بالإضافة إلى الكائنات الجديدة أعلاه FormData ، يتم تمرير النموذج مباشرة إلى المعلمة ، وهناك وظائف أخرى. معظم المقالات التي تم تقديمها بواسطة FormData على الإنترنت فقط أذكر طريقة APEND (). دعنا نعرف:

بعد وحدة التحكم ، لدينا اكتشاف كبير.

يتم استخدام طريقة الإلحاح () لإضافة قيم المفاتيح إلى كائن FormData:

 fd.append ('key1' ، value1) ؛

FD هو كائن FormData ، والذي يمكن بناؤه حديثًا.

قم بتعيين قيمة (قيمة) مفتاح المفتاح المقابل

 fd.set ('key1' ، value1) ؛

يبدو الأمر مشابهًا قليلاً لطريقة إلحاق (). لا يزال يقارن من خلال المثال ، نحن يعتمدون على نموذج النموذج.

 fd.append ('name' ، will) ؛

مفتاحان هو القيمة الرئيسية للاسم:

 fd.set ('name' ، will) ؛

مفتاح واحد فقط هو القيمة الرئيسية للاسم:

ما سبق هو الفرق بين الإلحاح () و set (). إذا لم تكن مجموعة القيمة المحددة موجودة ، فإن تأثير الاثنين هو نفسه.

احصل على معلمة ، مما يشير إلى أن اسم القيمة الرئيسية التي تريد حذفها ، إذا كان هناك العديد من قيم المفاتيح نفسها ، فسوف يحذفها:

 fd.append ('name' ، 'will') ؛

تم حذف معلومات الاسم في النموذج ومعلومات الاسم المضافة حديثًا من خلال Append ().

تلقي معلمة للإشارة إلى اسم المفتاح الذي تحتاجه للعثور عليه ، وإرجاع قيمة القيمة الأولى للمفتاح الأول. إذا كان هناك عدة مفتاح ، وأرجع كل قيمة القيمة المقابلة لهذا المفتاح.

بناءً على نموذج النموذج أعلاه:

 fd.append ('name' ، will ') ؛

 fd.append ('name' ، will ') ؛

تتلقى هذه الطريقة أيضًا معلمة ، وهي أيضًا اسم المفتاح ، وإرجاع قيمة منطقية لتحديد ما إذا كان كائن FormData يحتوي على المفتاح. النموذج أعلاه مثال:

 console.log (fd.has (name ')) ؛

لا تحتاج هذه الطريقة إلى تلقي المعلمات ، وإعادة التكرار من خلال هذا التكرار ، يمكننا اجتياز كل المفتاح في كائن FormData. النموذج أعلاه مثال:

 لـ (مفتاح var of fd.keys ()) {console.log (مفتاح) ؛}

النتيجة هي:

اسم

جنس

رقم

صورة

مع التكرار للمفتاح ، بالطبع ، لا غنى عنه لاجتياز مؤلف القيمة. القيم () هو تكرار القيمة.

 لـ (var value fd.values ​​()) {console.log (value) ؛}

نتيجة:

هناك تكرار يعبر المفتاح ، وهناك أيضًا تكرار القيمة ، لماذا لا تشارك في اثنين معًا! إدخالات () هي إرجاع جهاز التكرار الذي يحتوي على زوج من القيمة الرئيسية:

 لـ (var زوج من fd.entries ()) {console.log (زوج [0]+ '،'+ زوج [1]) ؛}

نتيجة:

نظرًا لأن FormData عبارة عن واجهة جديدة من مستوى XMLHTTPrequest 2 ، فإن متصفح IE أقل من IE10 لا يدعم FormData. الشكل أدناه:

ما سبق هو كل محتويات هذا المقال.