कोडइग्निटर में छवि और फ़ाइल कैसे अपलोड करें (उदाहरण सहित)

कोडइग्निटर फ़ाइल अपलोड

फ़ाइल प्रबंधन अधिकांश वेब अनुप्रयोगों के लिए आवश्यक है। यदि आप कोई सामग्री प्रबंधन प्रणाली विकसित कर रहे हैं, तो आपको छवियाँ, वर्ड दस्तावेज़, पीडीएफ रिपोर्ट आदि अपलोड करने में सक्षम होना होगा। यदि आप किसी सदस्यता साइट पर काम कर रहे हैं, तो आपको लोगों को अपनी प्रोफ़ाइल छवियाँ अपलोड करने के लिए प्रावधान करने की आवश्यकता हो सकती है। 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>

यहाँ,

if (isset($error)){…} जाँचता है कि क्या error variable सेट किया गया है। यदि परिणाम true है तो अपलोड लाइब्रेरी द्वारा लौटाई गई 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);
        }
    }

}

यहाँ,

class ImageUploadController extends CI_Controller {…} हमारे नियंत्रक वर्ग को परिभाषित करता है और आधार नियंत्रक CI_Controller को विस्तारित करता है
सार्वजनिक फ़ंक्शन __construct() {…} पैरेंट कंस्ट्रक्टर विधि को आरंभ करता है और URL और फ़ॉर्म हेल्पर्स को लोड करता है
सार्वजनिक फ़ंक्शन इंडेक्स() {…} इंडेक्स विधि को परिभाषित करता है जिसका उपयोग छवि अपलोड फ़ॉर्म को प्रदर्शित करने के लिए किया जाता है
public function store() {…} उस विधि को परिभाषित करता है जो छवि को अपलोड करेगा और उसे वेब अनुप्रयोग सर्वर पर संग्रहीत करेगा।

$config['upload_path'] = './images/'; वह निर्देशिका सेट करता है जहां छवियों को अपलोड किया जाना चाहिए
$config['allowed_types'] = 'gif|jpg|png'; स्वीकार्य फ़ाइल एक्सटेंशन को परिभाषित करता है। सुरक्षा कारणों से यह महत्वपूर्ण है। अनुमत प्रकार यह सुनिश्चित करते हैं कि केवल छवियाँ अपलोड की जाएँ और php जैसे अन्य फ़ाइल प्रकार अपलोड नहीं किए जा सकते क्योंकि उनमें सर्वर से समझौता करने की क्षमता होती है।
$config['max_size'] = 2000; किलोबाइट में अधिकतम फ़ाइल आकार सेट करें। हमारे उदाहरण में, अपलोड की जा सकने वाली अधिकतम फ़ाइल 2,000kb है जो 2MB के करीब है। यदि उपयोगकर्ता 2,000kb से बड़ी फ़ाइल अपलोड करने का प्रयास करता है, तो छवि अपलोड करने में विफल हो जाएगी और लाइब्रेरी एक त्रुटि संदेश लौटाएगी।
$config['max_width'] = 1500; छवि की अधिकतम चौड़ाई निर्धारित करता है जो हमारे मामले में 1,500 पिक्सेल है। इससे अधिक चौड़ाई होने पर त्रुटि होती है
$config['max_height'] = 1500; अधिकतम स्वीकार्य ऊंचाई को परिभाषित करता है।
$this->load->library('upload', $config); अपलोड लाइब्रेरी को लोड करता है और इसे $config सरणी के साथ आरंभ करता है जिसे हमने ऊपर परिभाषित किया है।
if (!$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); सफलतापूर्वक अपलोड किए गए दृश्य को लोड करता है और अपलोड की गई फ़ाइल मेटाडेटा को पास करता है।

कंट्रोलर के लिए बस इतना ही है। चलिए अब वह डायरेक्टरी बनाते हैं जहाँ हमारी इमेज अपलोड की जाएँगी। अपने एप्लीकेशन की रूट डायरेक्टरी में एक नई डायरेक्टरी “images” बनाएँ

अंत में, हम अपने रूट्स.php फ़ाइल में दो रूट जोड़ेंगे जो फ़ॉर्म प्रदर्शित करेंगे और परिणाम प्रदर्शित करेंगे

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

यहाँ,

$route['upload-image'] = 'imageuploadcontroller'; URL upload-image को परिभाषित करता है जो ImageUploadController की index विधि को कॉल करता है
$route['store-image'] = 'imageuploadcontroller/store'; URL store-image को परिभाषित करता है जो चयनित उपयोगकर्ता फ़ाइल को स्वीकार करता है और उसे सर्वर पर अपलोड करता है।

एप्लिकेशन का परीक्षण

आइये अंतर्निहित PHP सर्वर शुरू करें

टर्मिनल/कमांड लाइन खोलें और अपने एप्लिकेशन के रूट पर ब्राउज़ करें। मेरे मामले में, रूट ड्राइव C:\Sites\ci-app में स्थित है

cd C:\Sites\ci-app

निम्नलिखित कमांड का उपयोग करके सर्वर प्रारंभ करें

php -S localhost:3000

अपने वेब ब्राउज़र में निम्नलिखित URL लोड करें: http://localhost:3000/upload-image

आप निम्नलिखित परिणाम देख पाएंगे

फ़ाइल चुनें पर क्लिक करें

आपको निम्नलिखित के समान एक संवाद विंडो दिखाई देगी

अपनी इच्छित छवि का चयन करें और फिर खोलें पर क्लिक करें

चयनित फ़ाइल नाम फ़ॉर्म अपलोड में दिखाई देगा जैसा कि ऊपर दी गई छवि में दिखाया गया है। अपलोड इमेज बटन पर क्लिक करें

यदि सब कुछ ठीक रहा तो आपको निम्नलिखित परिणाम मिलेंगे

मेरी छवि देखें लिंक पर क्लिक करें!

आपको वह छवि दिखनी चाहिए जिसे आपने अपलोड किया है। परिणाम निम्नांकित के समान होंगे

ध्यान दें कि अपलोड की गई छवि का नाम URL में प्रदर्शित किया गया है। हमें अपलोड की गई छवि मेटाडेटा से छवि का नाम मिला

नोट: फ़ाइल अपलोड प्रक्रिया अन्य प्रकार की फ़ाइलों के लिए समान रहती है

आपको पसंद हो श्याद:

कोडइग्निटर फ़ाइल अपलोड

कोडइग्निटर में छवियाँ अपलोड करना

एप्लिकेशन का परीक्षण

संबंधित आलेख