دعنا نحلل كود HTML، PHP، JavaScript، وCSS للحصول على لوحة معلومات تحميل الملفات المقسمة جزءًا بجزء.

كود HTML:

نظرة عامة على الهيكل:

• Bootstrap للتخطيط: يستخدم الكود Bootstrap 4.5.2 لإنشاء تخطيط سريع الاستجابة مع قسمين رئيسيين:
  • قسم التحميلات المقسمة: لتحميل الملفات الكبيرة على شكل أجزاء.
  • قسم التنزيلات: لإدراج وتنزيل الملفات التي تم تحميلها مسبقًا.

العناصر الرئيسية:

• : يتيح هذا الإدخال تحديد ملفات متعددة.
• : عنصر نائب لعرض تقدم التحميل.
• : عنصر نائب لإظهار الملفات المحددة قبل التحميل.
• رفع الملفات: زر لبدء عملية التحميل.
• تنزيل الملفات: زر لجلب وعرض قائمة الملفات القابلة للتنزيل.

رمز PHP (chunked-file-upload.php):

يتعامل هذا الملف مع المنطق من جانب الخادم لتحميل الملفات في أجزاء.

الأجزاء الرئيسية:

1. تلقي قطعة وبيانات وصفية:

   • $_FILES['fileChunk']: يتلقى الجزء من الملف الذي يتم تحميله.
   • $_POST['chunkIndex']: فهرس القطعة الحالية.
   • $_POST['totalChunks']: إجمالي عدد المقاطع للملف.

2. تخزين القطع:

   • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex": يتم حفظ كل قطعة كملف .part منفصل حتى يتم تجميع الملف النهائي.

3. دمج القطع:

   • if ($chunkIndex == $totalChunks - 1): عندما يتم تحميل القطعة الأخيرة، يقوم البرنامج النصي بدمج جميع القطع في الملف النهائي.

4. رد الإرجاع:

   • يتم إرجاع استجابة JSON إلى العميل مع حالة التحميل وتفاصيل الملف.

لماذا استخدام القطع؟

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

كود PHP (download.php):

يتعامل مع تنزيلات الملفات.

الأجزاء الرئيسية:

1. $_GET['file']: يسترد اسم الملف من سلسلة استعلام URL.
2. إنشاء مسار الملف:
   • $filePath = $targetDir . $fileName: لإنشاء المسار الكامل للملف.
3. تحميل الملف:
   • readfile($filePath): يرسل الملف إلى العميل كدفق قابل للتنزيل.

لماذا استخدامه؟

• يمكّن المستخدمين من تنزيل الملفات مباشرة من الخادم. يرسل الخادم رؤوسًا مناسبة لمطالبة المتصفح بتنزيل الملف بدلاً من عرضه.

رمز PHP (get_files.php):

يسرد جميع الملفات المرفوعة المتاحة للتنزيل.

الأجزاء الرئيسية:

1. scandir($targetDir): لفحص الدليل لجميع الملفات التي تم تحميلها.
2. array_diff(): يقوم بتصفية . و .. من قائمة الملفات.
3. echo json_encode(array_values($files)): إرجاع قائمة الملفات كمصفوفة JSON.

لماذا استخدامه؟

• يوفر قائمة ديناميكية بالملفات المتاحة للتنزيل، والتي يتم تحديثها عند كل طلب.

كود جافا سكريبت (chunked-file-upload.js):

يتعامل مع المنطق من جانب العميل لتحميلات الملفات المقسمة وتنزيلات الملفات.

الأجزاء الرئيسية:

1. السحب والإفلات:

   • preventDefaults(e): يمنع المتصفح من فتح الملفات عند إسقاطها.
   • handleDrop(e): يعالج الملفات المسقطة ويعرضها.

2. عرض قائمة الملفات:

   • displayFileList(files): يعرض الملفات المحددة بأحجامها وحالتها في قائمة الملفات قبل التحميل.

3. رفع الملفات في أجزاء:

   • for (السماح بملف الملفات): يتكرر خلال كل ملف محدد.
   • const Chunk = file.slice(start, end): تقطيع جزء من الملف لتحميله كقطعة.
   • uploadChunk(): تحميل كل قطعة بشكل متكرر، وتحديث شريط التقدم والحالة، ودمج القطع على الخادم.

4. تنزيل الملفات:

   • $.ajax({url: './src/get_files.php'}): يرسل طلب AJAX للحصول على قائمة الملفات التي تم تحميلها.
   • downloadFile(fileName): يبدأ التنزيل عن طريق إعادة توجيه المستخدم إلى download.php.

لماذا نستخدم التحميل المقسم في JS؟

• بالنسبة للملفات الكبيرة، يضمن التحميل في أجزاء أصغر استمرار العملية حتى في حالة فشل جزء واحد. يعمل على تحسين الموثوقية من خلال السماح بإعادة المحاولة قطعة تلو الأخرى.

كود CSS (chunked-file-upload.css):

الأنماط الرئيسية:

1. #منطقة الإسقاط:

   • حدود متقطعة: تشير بصريًا إلى المنطقة التي يمكن للمستخدمين إسقاط الملفات فيها.
   • تأثير التمييز: يتغير لون الحدود عند سحب الملف.

2. شريط التقدم:

   • #progress-bar: يتم تحديث العرض ديناميكيًا ليعكس تقدم التحميل.

3. قائمة الملفات:

   • #file-list .file-status: يضيف مسافات وأنماط لعرض اسم الملف وحجمه وحالته.

لماذا أسلوب هذه العناصر؟

• تساعد الواجهة سهلة الاستخدام المستخدمين على فهم الإجراءات التي يمكنهم تنفيذها (السحب والإفلات واختيار الملف) وتقديم تعليقات حول حالة التحميلات/التنزيلات الخاصة بهم.

خاتمة:

يسمح هذا النظام بتحميل الملفات الكبيرة بشكل موثوق في أجزاء ويزود المستخدمين بالتعليقات من خلال شريط التقدم وتحديثات الحالة. بالإضافة إلى ذلك، يمنح قسم التنزيل المستخدمين القدرة على تنزيل الملفات التي تم تحميلها. يضمن الجمع بين Bootstrap وJavaScript وPHP أن يكون النظام سهل الاستخدام وعمليًا.

روابط الاتصال

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

إذا كنت تريد المزيد من المحتوى المفيد مثل هذا، فلا تتردد في متابعتي:

• لينكد إن
• جيثب

كود المصدر