วิธีการอัปโหลดรูปภาพและไฟล์ใน Codeตัวจุดไฟ (พร้อมตัวอย่าง)
ฟิโอน่า บราวน์
⚡ สรุปอย่างชาญฉลาด
CodeIgniter File Upload ใช้ไลบรารี Upload ที่มีอยู่แล้วเพื่อย้ายรูปภาพและเอกสารจากฟอร์ม HTML ไปยังไดเร็กทอรีบนเซิร์ฟเวอร์ ตัวอย่างนี้สร้างฟอร์มอัปโหลด ตัวควบคุมที่ตรวจสอบประเภทและขนาด และหน้าแสดงผลลัพธ์ที่ยืนยันการอัปโหลด
Codeการอัปโหลดไฟล์ Igniter
การจัดการไฟล์เป็นสิ่งจำเป็นสำหรับเว็บแอปพลิเคชันส่วนใหญ่ หากคุณกำลังพัฒนา...ping หากคุณใช้ระบบจัดการเนื้อหา คุณจะต้องสามารถอัปโหลดรูปภาพ เอกสาร Word รายงาน PDF และอื่นๆ อีกมากมาย หากคุณกำลังทำงานกับเว็บไซต์สมาชิก คุณอาจต้องจัดเตรียมให้ผู้ใช้สามารถอัปโหลดรูปโปรไฟล์ของตนเองได้ Codeคลาส Igniter File Uploading ช่วยให้เราทำทุกอย่างที่กล่าวมาข้างต้นได้อย่างง่ายดาย
ในบทช่วยสอนนี้ เราจะดูวิธีใช้ไลบรารีการอัปโหลดไฟล์เพื่อโหลดไฟล์
การอัปโหลดรูปภาพใน Codeเครื่องทำให้ลุกไหม้
กำลังอัพโหลดไฟล์เข้า Codeเครื่องทำให้ลุกไหม้ ประกอบด้วยสองส่วนหลัก คือ ส่วนหน้า (frontend) และส่วนหลัง (backend) ส่วนหน้าจัดการโดยแบบฟอร์ม 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)){…}` จะตรวจสอบว่าตัวแปร `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 helper) เพื่อสร้างลิงก์ไปยังไฟล์ที่อัปโหลดใหม่ในไดเร็กทอรีรูปภาพ โดยชื่อลิงก์จะถูกดึงมาจากข้อมูลเมตาของรูปภาพที่ส่งไปยังวิวเมื่อไฟล์ถูกอัปโหลดสำเร็จแล้ว
ต่อไปเราจะสร้างคอนโทรลเลอร์ที่จะตอบสนองต่อการอัปโหลดรูปภาพของเรา
เพิ่มไฟล์ใหม่ 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,000 กิโลไบต์ ซึ่งใกล้เคียงกับ 2 เมกะไบต์ หากผู้ใช้พยายามอัปโหลดไฟล์ที่มีขนาดใหญ่กว่า 2,000 กิโลไบต์ การอัปโหลดรูปภาพจะล้มเหลว และไลบรารีจะแสดงข้อความแสดงข้อผิดพลาด
- $config['max_width'] = 1500; กำหนดความกว้างสูงสุดของภาพ ซึ่งในกรณีของเราคือ 1,500 พิกเซล หากความกว้างมากกว่านี้ จะทำให้เกิดข้อผิดพลาด
- $config['max_height'] = 1500; กำหนดความสูงสูงสุดที่ยอมรับได้
- $this->load->library('อัพโหลด', $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); โหลดมุมมองที่อัปโหลดสำเร็จและส่งผ่านข้อมูลเมตาของไฟล์ที่อัปโหลด
ส่วนคอนโทรลเลอร์ก็เสร็จเรียบร้อยแล้ว ต่อไปเรามาสร้างไดเร็กทอรีสำหรับอัปโหลดรูปภาพกัน สร้างไดเร็กทอรีใหม่ชื่อ “images” ในไดเร็กทอรีหลักของแอปพลิเคชันของคุณ
สุดท้ายนี้ เราจะเพิ่มเส้นทางสองเส้นทางลงในไฟล์ routes.php เพื่อแสดงแบบฟอร์มและแสดงผลลัพธ์
เปิดไฟล์ application/config/routes.php แล้วเพิ่มเส้นทางต่อไปนี้
$route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ที่นี่
- $route['upload-image'] = 'imageuploadcontroller'; กำหนด URL อัปโหลดรูปภาพที่เรียกใช้เมธอด index ของ ImageUploadController
- $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
คุณจะสามารถเห็นผลลัพธ์ดังต่อไปนี้
คลิกเลือกไฟล์
คุณควรจะเห็นหน้าต่างโต้ตอบที่คล้ายกับต่อไปนี้
เลือกภาพที่คุณต้องการ จากนั้นคลิกที่ปุ่มเปิด
ชื่อไฟล์ที่เลือกจะปรากฏในแบบฟอร์มการอัปโหลดดังที่แสดงในภาพด้านบน คลิกที่ปุ่ม "อัปโหลดรูปภาพ"
หากทุกอย่างเป็นไปได้ด้วยดี คุณจะได้รับผลลัพธ์ดังต่อไปนี้
คลิกที่ลิงก์ "ดูรูปภาพของฉัน!"
คุณควรจะเห็นภาพที่คุณอัปโหลด ผลลัพธ์จะคล้ายกับภาพต่อไปนี้
โปรดสังเกตว่าชื่อไฟล์ภาพที่อัปโหลดจะแสดงอยู่ในนั้น URLเราได้ชื่อไฟล์ภาพมาจากข้อมูลเมตาของภาพที่อัปโหลดมา
หมายเหตุ: ขั้นตอนการอัปโหลดไฟล์ยังคงเหมือนเดิมสำหรับไฟล์ประเภทอื่นๆ
