كيفية تحميل الصورة والملف في CodeIgniter (مع مثال)

تحميل ملف CodeIgniter

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

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

تحميل الصور في CodeIgniter

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

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

قم بإنشاء دليل جديد يسمى الملفات في دليل التطبيق/طرق العرض

أضف الملفات التالية في 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('store-image')?>" 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>

هنا،

إذا (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>

هنا،

يستخدم مساعد الربط لإنشاء رابط للملف الجديد الذي تم تحميله في دليل الصور. يتم استرداد الاسم من بيانات تعريف الصورة التي يتم تمريرها إلى العرض عندما يتم تحميل الملف بنجاح.

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

قم بإضافة ملف جديد 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 التي حددناها أعلاه.
إذا حاول (!$this->upload->do_upload('profile_image')) {…} تحميل الصورة المرسلة والتي تسمى في حالتنا 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); يقوم بتحميل العرض الذي تم تحميله بنجاح وتمرير البيانات الوصفية للملف الذي تم تحميله.

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

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

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

هنا،

$route['upload-image'] = 'imageuploadcontroller'; يحدد صورة تحميل عنوان URL التي تستدعي طريقة الفهرس الخاصة بـ ImageUploadController
$route['store-image'] = 'imageuploadcontroller/store'; يحدد صورة مخزن URL التي تقبل ملف المستخدم المحدد وتحميله إلى الخادم.

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

لنبدأ خادم PHP المدمج

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

cd C:\Sites\ci-app

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

php -S localhost:3000

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

سوف تكون قادرا على رؤية النتائج التالية

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

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

حدد الصورة المطلوبة ثم انقر فوق فتح

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

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

انقر على عرض صورتي! وصلة

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

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

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

قد ترغب:

تحميل ملف CodeIgniter

تحميل الصور في CodeIgniter

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

ذات المواد