วิธีการอัปโหลดรูปภาพและไฟล์ใน Codeตัวจุดไฟ (พร้อมตัวอย่าง)

โดย: ฟิโอน่า บราวน์ ฟิโอน่า บราวน์
Hours วันที่อัพเดท

Codeการอัปโหลดไฟล์ Igniter

การจัดการไฟล์เป็นสิ่งจำเป็นสำหรับเว็บแอปพลิเคชันส่วนใหญ่ หากคุณกำลังพัฒนา...ping หากคุณใช้ระบบจัดการเนื้อหา คุณจะต้องสามารถอัปโหลดรูปภาพ เอกสาร Word รายงาน PDF ฯลฯ ได้ หากคุณกำลังทำงานกับเว็บไซต์สมาชิก คุณอาจต้องจัดเตรียมฟังก์ชันให้ผู้ใช้สามารถอัปโหลดรูปโปรไฟล์ของตนเองได้ Codeคลาส File Uploading ของ Igniter ช่วยให้เราทำทุกอย่างที่กล่าวมาข้างต้นได้อย่างง่ายดาย

ในบทช่วยสอนนี้ เราจะดูวิธีใช้ไลบรารีการอัปโหลดไฟล์เพื่อโหลดไฟล์

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

กำลังอัพโหลดไฟล์เข้า Codeเครื่องทำให้ลุกไหม้ มีสองส่วนหลัก ส่วนหน้าและส่วนหลัง ส่วนหน้าได้รับการจัดการโดยรูปแบบ HTML ที่ใช้ไฟล์ประเภทอินพุตของแบบฟอร์ม ที่แบ็กเอนด์ ไลบรารีการอัปโหลดไฟล์จะประมวลผลอินพุตที่ส่งจากแบบฟอร์มและเขียนลงในไดเร็กทอรีอัปโหลด

เริ่มต้นด้วยแบบฟอร์มอินพุต

สร้างไดเร็กทอรีใหม่ที่เรียกว่าไฟล์ในไดเร็กทอรี 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('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 ได้รับการตั้งค่าหรือไม่ หากผลลัพธ์เป็นจริง ข้อผิดพลาดที่ส่งคืนโดยไลบรารี upload จะแสดงให้ผู้ใช้เห็น
  • ไฟล์ประเภทอนุญาตให้ผู้ใช้เบราว์เซอร์ไปยังคอมพิวเตอร์และเลือกไฟล์สำหรับการอัปโหลด

เพิ่มโค้ดต่อไปนี้ลงใน 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 ใน application/controllers

เพิ่มโค้ดต่อไปนี้ลงใน 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 และแบบฟอร์ม
  • public function index() {…} กำหนดวิธีการทำดัชนีที่ใช้แสดงแบบฟอร์มอัพโหลดรูปภาพ
  • 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 px ความกว้างใดๆ ที่ใหญ่กว่านั้นส่งผลให้เกิดข้อผิดพลาด
    • $config['max_height'] = 1500; กำหนดความสูงสูงสุดที่ยอมรับได้
    • $this->load->library('อัพโหลด', $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” ในไดเร็กทอรีรากของแอปพลิเคชันของคุณ

สุดท้ายนี้ เราจะเพิ่มสองเส้นทางลงในไฟล์ 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 อัปโหลดรูปภาพที่เรียกใช้เมธอด index ของ 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

คุณจะสามารถเห็นผลลัพธ์ต่อไปนี้

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

คลิกเลือกไฟล์

คุณควรจะเห็นหน้าต่างโต้ตอบที่คล้ายกับต่อไปนี้

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

เลือกภาพที่คุณต้องการจากนั้นคลิกเปิด

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

ชื่อไฟล์ที่เลือกจะปรากฏในการอัพโหลดแบบฟอร์มดังที่แสดงในภาพด้านบน คลิกที่ปุ่มอัพโหลดรูปภาพ

คุณจะได้รับผลลัพธ์ต่อไปนี้โดยถือว่าทุกอย่างเป็นไปด้วยดี

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

คลิกดูภาพของฉัน! ลิงค์

คุณควรจะสามารถเห็นภาพที่คุณอัพโหลดได้ ผลลัพธ์จะคล้ายกับต่อไปนี้

การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้

โปรดสังเกตว่าชื่อภาพที่อัปโหลดจะแสดงอยู่ใน URLเราได้ชื่อภาพมาจากข้อมูลเมตาของภาพที่อัปโหลดมา

บทความที่เกี่ยวข้อง

หมายเหตุ: กระบวนการอัปโหลดไฟล์ยังคงเหมือนเดิมสำหรับไฟล์ประเภทอื่นๆ

สรุปโพสต์นี้ด้วย: