أرفع ملفاتك بواسطة Ajax/PHP

في درسنا اليوم سنتعلم بعض الحيل البرمجية

  • تكوين صورة مصغرة للصورة المختارة قبل رفعها بالفعل
  • التحقق من صحة نوع الصورة و حجمها قبل الرفع
  • استخدام XMLHttpRequest في رفع الملفات بتقنية AJAX
  • صنع سكربت PHP لرفع الملفات لمسار معين
تحميل الكود

تخطيط الملفات

arch

  • index.html أكواد HTML + JavaScript
  • index.php كود الرفع الي السيرفر
  • مجلد uploads حيث المسار النهائي الذي ستكون فيه الملفات المرفوعة
  • مجلد js حيث يحتوى ملف الـ jquery

HTML

قمنا بعمل input من نوع file لرفع الملفات, بالاضافة الى وسم img لنتمكن من تعيين صورة مصغرة للصورة قبل رفعها, و وسم h4 لتعيين رسالة تنفيذ العملية

JavaScript

سوف نستخدم دالة generate_thumbnail لجلب مسار الصورة على جهاز المستخدم و تعيينها في وسم الـ img و ذلك عند تغير قيمة الـ input الخاص باختيار الملفات, و بالنسبة للدالة فستكون بالشكل التالي

لنرفع الملف الى السيرفر, سنقوم أولاً بفحص نوع الملف و حجمه من خلال الاكواد, و لاحظ ان الرقم 256000 هو الحجم الأقصى للملف بالبايت, كما حددت في الكود

و من بعدها سنستخدم XMLHttpRequest لرفع الملف بتقنية الـ ajax, و ستلاحظ في السطرالخامس المسار upload.php و هو مسار كود الـ php على السيرفر, كما يجدر الاشارة الى ان الرد من السيرفر سيكون منسق بطريقة الـ json كما سنرى فيما بعد

 PHP

في البداية سنقوم بتعيين مسار المجلد الخاص بلرفع في السطر

و بعدها سنقوم بتعيين مصفوفة للامتدادات المسموح رفعها و بعدها سنقوم باقتطاع رمز امتداد الملف في متغير لفحص سماحيته بالاضافة لفحص نوع الملف و حجمه

كما سنقوم بفحص أي أخطاء ملحقة برفع الملف, و في حالة عدم تواجد أخطاء نقوم بتعيين اسم جديد للملف باستخدام الدالة rand  و رفع الملف الى المجلد المراد

و كما لاحظنا فاننا نخزن قيمة النتيجة للعلميات في المصفوفة

و من ثم نقوم بعرض النتيجة في النهاية باستخدام json

 

تحميل الكود

 

أضف تعليقاً

أو