كيفية تحميل الصور والملفات في Codeجهاز الإشعال (مع مثال)

من قبل: فيونا براون فيونا براون
Hours تحديث

⚡ ملخص ذكي

Codeتستخدم ميزة رفع الملفات في Igniter مكتبة Upload المدمجة لنقل الصور والمستندات من نموذج HTML إلى دليل الخادم. ينشئ هذا المثال نموذج رفع ملفات، ووحدة تحكم للتحقق من نوع الملف وحجمه، وصفحة نتائج لتأكيد عملية الرفع.

  • 📁 الفصل الدراسي الأساسي: تتولى مكتبة التحميل مهام الواجهة الخلفية للتحقق من صحة الملف المُرسل وكتابته في دليل التحميل المُختار.
  • 🖼️ جزءين: يتطلب التحميل نموذج HTML أمامي مع نوع إدخال ملف بالإضافة إلى وحدة تحكم خلفية تعالج عملية الإرسال.
  • 🔒 قائمة الأنواع المسموح بها: لا يقبل ملف التكوين allowed_types إلا الامتدادات المدرجة مثل gif و jpg و png، مما يؤدي إلى حظر الملفات الخطرة مثل نصوص PHP البرمجية.
  • 📏 حدود الحجم: تقوم مفاتيح max_size و max_width و max_height برفض الملفات التي تتجاوز الحدود وإرجاع رسالة خطأ واضحة.
  • 📝 ترميز النموذج: يجب أن يقوم النموذج بتعيين enctype إلى multipart/form-data، وإلا فلن يصل الملف المحدد إلى الخادم.
  • 📄 بيانات النتائج: عند النجاح، تقوم الدالة upload->data() بإرجاع تفاصيل الملف المستخدمة لإنشاء رابط للصورة المخزنة حديثًا.
  • 🤖 مساعدة الذكاء الاصطناعي: يمكن لأدوات الذكاء الاصطناعي إنشاء نموذج التحميل، وقواعد التحقق من صحة وحدة التحكم، ومعالجة الأخطاء، ثم مراجعتها بحثًا عن الثغرات الأمنية.
اقرأ المزيد

Codeتحميل ملف Igniter

Codeتحميل ملف Igniter

تُعد إدارة الملفات ضرورية لمعظم تطبيقات الويب. إذا كنت مطورًاping إذا كنت تعمل على نظام إدارة محتوى، فستحتاج إلى القدرة على تحميل الصور، ومستندات وورد، وتقارير PDF، وغيرها. وإذا كنت تعمل على موقع عضوية، فقد تحتاج إلى توفير إمكانية تحميل صور الملف الشخصي للمستخدمين. Codeتُسهّل فئة Igniter File Uploading علينا القيام بكل ما سبق.

في هذا البرنامج التعليمي، سننظر في كيفية استخدام مكتبة تحميل الملفات لتحميل الملفات.

تحميل الصور في Codeأنبوب

تحميل الملف في Codeأنبوب يتكون النظام من جزأين رئيسيين: الواجهة الأمامية والخلفية. تتولى الواجهة الأمامية معالجة البيانات من خلال نموذج HTML الذي يستخدم نوع إدخال الملف. أما في الخلفية، فتقوم مكتبة تحميل الملفات بمعالجة البيانات المُدخلة من النموذج وكتابتها في مجلد التحميل.

لنبدأ بنموذج الإدخال.

أنشئ مجلدًا جديدًا باسم files في مجلد application/views.

أضف الملفات التالية في application/views/files

  • upload_form.php - يحتوي هذا العرض على نموذج HTML الذي يحتوي على نوع الملف المُدخل ويقوم بإرسال الملف المحدد إلى الخادم للمعالجة
  • upload_result.php – يعرض هذا العرض نتائج الصورة التي تم تحميلها، بما في ذلك رابط يمكننا النقر عليه لعرض النتائج.

أضف الكود التالي إلى upload_form.php

<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter Image Upload</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Select an image from your computer and upload it to the cloud</h3>
<?php
if (isset($error)){
echo $error;
}
?>
<form method="post" action="<?=base_url(0)?>" enctype="multipart/form-data">
<input type="file" id="profile_image" name="profile_image" size="33" />
<input type="submit" value="Upload Image" />
</form>
</div>
</body>
</html>

هنا،

  • يتحقق الشرط if (isset($error)){…} مما إذا كان متغير الخطأ قد تم تعيينه. إذا كانت النتيجة صحيحة، فسيتم عرض الخطأ الذي أرجعته مكتبة التحميل للمستخدم.
  • يسمح نوع الملف للمستخدم بتصفح جهاز الكمبيوتر الخاص به واختيار ملف لتحميله.

ذات المواد

أضف الكود التالي إلى ملف upload_result.php

<!DOCTYPE html>
<html>
<head>
<title>Image Upload Results</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Congratulations, the image has successfully been uploaded</h3>
<p>Click here to view the image you just uploaded
<?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
</p>
 
<p>
<?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
</p>
</div>
</body>
</html>

هنا،

  • يستخدم هذا النظام أداة المساعدة "anchor" لإنشاء رابط إلى الملف الذي تم تحميله حديثًا في مجلد الصور. ويتم استرداد اسم الملف من بيانات تعريف الصورة التي يتم تمريرها إلى العرض عند اكتمال تحميل الملف بنجاح.

لنقم الآن بإنشاء وحدة التحكم التي ستستجيب لعملية تحميل الصور.

قم بإضافة ملف جديد ImageUploadController.php في التطبيق/وحدات التحكم

أضف الكود التالي إلى ImageUploadController.php

<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class ImageUploadController extends CI_Controller {
 
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
}
 
public function index() {
$this->load->view('files/upload_form');
}
 
public function store() {
$config['upload_path'] = './images/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 2000;
$config['max_width'] = 1500;
$config['max_height'] = 1500;
 
$this->load->library('upload', $config);
 
if (!$this->upload->do_upload('profile_image')) {
$error = array('error' => $this->upload->display_errors());
 
$this->load->view('files/upload_form', $error);
} else {
$data = array('image_metadata' => $this->upload->data());
 
$this->load->view('files/upload_result', $data);
}
}
 
}

هنا،

  • فئة ImageUploadController تمتد CI_Controller {...} تحدد فئة وحدة التحكم الخاصة بنا وتوسع وحدة التحكم الأساسية CI_Controller
  • تقوم الوظيفة العامة __construct() {...} بتهيئة طريقة المُنشئ الأصل وتحميل عنوان url ومساعدي النموذج
  • يحدد فهرس الوظيفة العامة () {...} طريقة الفهرس المستخدمة لعرض نموذج تحميل الصورة
  • يحدد مخزن الوظيفة العامة () {...} الطريقة التي سيتم من خلالها تحميل الصورة وتخزينها على خادم تطبيقات الويب.
    • $config['upload_path'] = './images/'; يضبط الدليل الذي يجب تحميل الصور فيه
    • يُحدد المتغير `$config['allowed_types'] = 'gif|jpg|png'` امتدادات الملفات المسموح بها. وهذا أمر بالغ الأهمية لأسباب أمنية. تضمن الأنواع المسموح بها تحميل الصور فقط، ومنع تحميل أنواع الملفات الأخرى مثل ملفات PHP، لأنها قد تُعرّض الخادم للخطر.
    • يُحدد المتغير `$config['max_size'] = 2000` الحد الأقصى لحجم الملف بالكيلوبايت. في مثالنا، الحد الأقصى لحجم الملف الذي يمكن تحميله هو 2,000 كيلوبايت، أي ما يقارب 2 ميجابايت. إذا حاول المستخدم تحميل ملف أكبر من 2,000 كيلوبايت، فسيفشل تحميل الصورة وستُظهر المكتبة رسالة خطأ.
    • يُحدد المتغير $config['max_width'] = 1500 الحد الأقصى لعرض الصورة، وهو في حالتنا 1,500 بكسل. أي عرض أكبر من ذلك سيؤدي إلى حدوث خطأ.
    • $config['max_height'] = 1500; يحدد الحد الأقصى للارتفاع المقبول.
    • $this->load->library('upload', $config); يقوم بتحميل مكتبة التحميل وتهيئتها باستخدام المصفوفة $config التي حددناها أعلاه.
    • إذا لم يتم تحميل الصورة المطلوبة، فسيتم محاولة تحميل الصورة المُرسلة، والتي تُسمى في حالتنا profile_image.
    • $error = array('error' => $this->upload->display_errors()); يضبط رسالة الخطأ في حالة فشل التحميل
    • $this->load->view('files/upload_form', $error); يقوم بتحميل نموذج تحميل الملف ويعرض رسالة الخطأ التي يتم إرجاعها من مكتبة التحميل
    • $data = array('image_metadata' => $this->upload->data()); يضبط البيانات الوصفية للصورة إذا كان التحميل ناجحًا
    • $this->load->view('files/upload_result', $data); يقوم بتحميل العرض الذي تم تحميله بنجاح وتمرير البيانات الوصفية للملف الذي تم تحميله.

هذا كل ما يتعلق بوحدة التحكم. لنقم الآن بإنشاء المجلد الذي سيتم تحميل الصور إليه. أنشئ مجلدًا جديدًا باسم "images" في المجلد الرئيسي لتطبيقك.

وأخيرًا، سنضيف مسارين إلى ملف routes.php الخاص بنا لعرض النموذج وعرض النتائج.

افتح الملف application/config/routes.php وأضف المسارات التالية

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

هنا،

  • يُعرّف المتغير $route['upload-image'] = 'imageuploadcontroller'; URL تحميل الصورة التي تستدعي دالة الفهرسة الخاصة بوحدة تحكم تحميل الصور
  • يُعرّف المتغير $route['store-image'] = 'imageuploadcontroller/store'; URL برنامج تخزين الصور الذي يقبل ملف المستخدم المحدد ويقوم بتحميله إلى الخادم.

كيفية إصلاح المشاكل الشائعة Codeأخطاء تحميل الملفات في برنامج Igniter

معظم حالات فشل التحميل تُرسل رسالة واضحة من مكتبة التحميل. القائمة أدناه توضح الأخطاء الشائعة وحلولها.

  • نوع الملف الذي تحاول تحميله غير مسموح به: أضف الامتداد المفقود إلى تكوين allowed_types، على سبيل المثال 'gif|jpg|png|pdf'.
  • الملف الذي تحاول تحميله أكبر من الحجم المسموح به: قم برفع قيمة max_size، وتأكد من أن قيمتي upload_max_filesize و post_max_size في ملف php.ini كبيرتان بما يكفي.
  • يبدو أن مسار التحميل غير صالح: قم بإنشاء دليل upload_path وتأكد من أن خادم الويب لديه إذن الكتابة عليه.
  • لم تقم بتحديد ملف لتحميله: تحقق من أن اسم الإدخال يطابق وسيطة do_upload() وأن النموذج يستخدم enctype multipart/form-data.

اختبار التطبيق

لنبدأ تشغيل خادم PHP المدمج.

افتح الطرفية أو سطر الأوامر وانتقل إلى جذر تطبيقك. في حالتي، يقع الجذر في محرك الأقراص C:\Sites\ci-app

cd C:\Sites\ci-app

ابدأ تشغيل الخادم باستخدام الأمر التالي

php -S localhost:3000

قم بتحميل ما يلي URL في متصفح الويب الخاص بك: http://localhost:3000/upload-image

ستتمكن من رؤية النتائج التالية

تحميل الصور في Codeأنبوب

انقر على اختيار ملف

يجب أن تكون قادرًا على رؤية نافذة حوار مشابهة لما يلي

تحميل الصور في Codeأنبوب

اختر الصورة التي تريدها، ثم انقر على "فتح".

تحميل الصور في Codeأنبوب

سيظهر اسم الملف المحدد في نموذج التحميل كما هو موضح في الصورة أعلاه. انقر على زر "تحميل الصورة".

ستحصل على النتائج التالية، بافتراض أن كل شيء يسير على ما يرام.

تحميل الصور في Codeأنبوب

انقر على رابط "عرض صورتي!"

يجب أن تتمكن من رؤية الصورة التي قمت بتحميلها. ستكون النتائج مشابهة لما يلي.

تحميل الصور في Codeأنبوب

لاحظ أن اسم الصورة التي تم تحميلها يظهر في URLحصلنا على اسم الصورة من بيانات تعريف الصورة التي تم تحميلها.

ملاحظة: تبقى عملية تحميل الملفات كما هي بالنسبة لأنواع الملفات الأخرى.

الأسئلة الشائعة

استخدم Codeتتعامل مكتبة Igniter 3 Upload مع ملف واحد لكل استدعاء do_upload()، لذلك تقوم بالتكرار على $_FILES واستدعائها لكل عنصر. Codeيدعم Igniter 4 عمليات التحميل المتعددة مباشرة من خلال طريقة getFileMultiple().

رقم Codeيستبدل Igniter 4 مكتبة Upload بواجهة برمجة تطبيقات Request file. يمكنك استدعاء $this->request->getFile('field')، والتحقق من صحته، ثم استخدام move() لتخزين الملف، بدلاً من تحميل مكتبة رفع ملفات منفصلة.

قم بتعيين قيمة $config['encrypt_name'] إلى TRUE لإعطاء كل ملف اسمًا عشوائيًا، أو قم بتعيين قيمة $config['file_name'] إلى القيمة التي تختارها. هذا يمنع الكتابة فوق الملفات الموجودة التي تحمل نفس الاسم الأصلي.

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

نعم. الصق رسالة الخطأ ووحدة التحكم الخاصة بك، وسيتمكن الذكاء الاصطناعي من تحديد المشكلات مثل نموذج multipart مفقود، أو upload_path غير قابل للكتابة، أو امتداد مفقود من allowed_types، ثم يقترح الحل.

تلخيص هذه التدوينة بـ: