CodeIgniter Basic Upload File With Database

ใบบทความนี้ เราจะมาแนะนำถึงการใช้งาน CodeIgniter ในส่วนของการ Upload File ครับ ซึ่ง ตัว CodeIgniter Framework ได้เตรียม ส่วนของการ Upload และ การตรวจสอบ ไฟล์ เช่น ขนาด รูปแบบ และ อื่น ๆ ไว้อยู่แล้ว เราจะมาทำการเรียกใช้งาน Class Upload กันเลยดีกว่า

ก่อนอื่นเรามาสร้าง Folder สำหรับ เก็บ ไฟล์ที่เรา Upload กันก่อน

สร้าง Folder uploads เก็บไว้ที่ D:/xampp/htdocs/MyApp/uploads

View

สร้าง view สำหรับ การ Upload File

สร้างไฟล์ upload_form.php ไว้ที่ D:/xampp/htdocs/MyApp/application/views/upload_form.php

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Customer</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

</head>

<body>

<div class="container">

  <h1>Upload File </h1>
   
  <?php echo $error;?> 

  <form action="upload_file"  enctype="multipart/form-data" method="post" accept-charset="utf-8">

      <div class="form-group">

        <label for="exampleInputFile">Image</label>

        <input type="file"  name = "userfile">

      </div>

      <button type="submit" class="btn btn-success">บันทึก</button>

   </form>
        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Your Website <?php echo date("Y")?></p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

เพิ่มเติม ในการ Upload File นั้น ในส่วนของ Form ต้องมีการระบุ

 enctype="multipart/form-data"

หากไม่ระบุ จะทำให้ไม่สามารถ Upload ได้ครับ หลายคน ติดปัญหา Upload ไม่ได้เพราะ ลืมใส่ส่วนนี้ (บางครั้งผู้เขียนเองก็ลืมเหมือนกันครับ 555)

ในส่วนของ $error คือ การแสดงผล Error ต่าง ๆ กรณีไม่สามารถ Upload File ได้ ครับ

สร้างไฟล์ upload_success.php ไว้ที่ C:/xampp/htdocs/MyApp/application/views/upload_success.php สำหรับแสดงข้อมูลไฟล์ที่ Upload สำเร็จ

<html>
 
   <head> 
      <title>Upload Form</title> 
   </head>
	
   <body>  
      <h3>Your file was successfully uploaded!</h3>  
		
      <ul> 
         <?php foreach ($upload_data as $item => $value):?> 
         <li><?php echo $item;?>: <?php echo $value;?></li> 
         <?php endforeach; ?>
      </ul>  
		

   </body>
	
</html>

Controller Test

สร้างไฟล์ test.php ไว้ที่ D:/xampp/htdocs/MyApp/application/controller/Test.php

ใน controller Test จะมี Function index เรียกใช้งาน view upload_form สำหรับการ Upload File และ Function upload_file สำหรับ การรับข้อมูลจาก view และ ตรวจสอบความถูกต้องของไฟล์ หากไม่สามารถ Upload ได้ จะส่ง Error กลับไปที่ view upload_form แต่ กรณี Upload สำเร็จ จะ ส่งค่า $data ไปที่ upload_success

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Test extends CI_Controller {

    public function __construct() {

	        parent::__construct();
                $this->load->helper('url'); 
	        
	}   

 	public function index(){
		
		//เรียกใช้งาน view สำหรับ Upload File
		$this->load->view('upload_form', array('error' => ' ' )); 
	}

	public function upload_file(){

         $config['upload_path']   = './uploads/'; //Folder สำหรับ เก็บ ไฟล์ที่  Upload
         $config['allowed_types'] = 'gif|jpg|png'; //รูปแบบไฟล์ที่ อนุญาตให้ Upload ได้
         $config['max_size']      = 100; //ขนาดไฟล์สูงสุดที่ Upload ได้ (กรณีไม่จำกัดขนาด กำหนดเป็น 0)
         $config['max_width']     = 1024; //ขนาดความกว้างสูงสุด (กรณีไม่จำกัดขนาด กำหนดเป็น 0)
         $config['max_height']    = 768;  //ขนาดความสูงสูงสดุ (กรณีไม่จำกัดขนาด กำหนดเป็น 0)
         $config['encrypt_name']  = true; //กำหนดเป็น true ให้ระบบ เปลียนชื่อ ไฟล์  อัตโนมัติ  ป้องกันกรณีชื่อไฟล์ซ้ำกัน

         $this->load->library('upload', $config);
		 
			//ตรวจสอบว่า การ Upload สำเร็จหรือไม่	
         if ( ! $this->upload->do_upload('userfile')) {

			//กรณีมี Error ให้เก็บค่าไว้ในตัวแปร $error
            $error = array('error' => $this->upload->display_errors()); 
			
			//เรียกใช้งาน view และ ส่งค่า $error ให้แสดงผลกรณีมี Error
            $this->load->view('upload_form', $error); 

         }else { 
			//ตัวแปร $data เก็บข้อมูล ของไฟล์ที่ Upload
            $data = array('upload_data' => $this->upload->data()); 
			
			//เรียกใช้งาน view และ ส่งค่า $data ไปแสดงผลด้วย
            $this->load->view('upload_success', $data); 
         } 
	}
}

ทดสอบการทำงาน

ไปที่ http://localhost/myapp/index.php/test/index

กรณีที่ ไม่ได้เลือกรูปภาพ หรือ ไม่สามารถ Upload ได้จะมี Error ดังภาพ

กรณี Upload สำเร็จจะแสดงข้อมูลของไฟล์ ที่ Upload

การประยุกต์ใช้งาน กับ ฐานข้อมูล MySQL

จากบทความก่อนหน้า เราได้แนะนำถึง การ เพิ่ม แก้ไข ลบ ข้อมูล กันไปแล้ว ในบทความนี้ เราจะเพิ่มเติม การ บันทึกรูปภาพ โดยจะเก็บชื่อรูปภาพ ที่ Upload ลงใน ฐานข้อมูลด้วย

สร้าง database basic และ สร้างตาราง customer

CREATE TABLE `customer` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `first_name` varchar(255) NOT NULL,
 `last_name` varchar(255) NOT NULL,
 `phone` varchar(255) NOT NULL,
 `image` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8

Customer Controller

แก้ไขไฟล์ Customer.php โดยเพิ่มส่วนของการ Upload ดังนี้

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Customer extends CI_Controller {
	
	function __construct() { 
	
         parent::__construct(); 
		 
		 $this->load->model('Customer_Model');
		 
         $this->load->helper('url'); 
		 
		 $this->load->helper('form');
		 
		 $this->load->helper('html');
		 
         $this->load->database(); 
    } 

	public function index()
	{
		$query = $this->db->get("customer"); 
		 
        $data['result'] = $query->result(); 
		
		$this->load->view('header');
		
		$this->load->view('customer/customer_data',$data);
		
		$this->load->view('footer');
	}
	
	public function add_customer_form(){
		
		$this->load->view('header');
		
		$this->load->view('customer/customer_add_form');
		
		$this->load->view('footer');
	}
	
	public function save_customer(){
		
         $config['upload_path']   = './uploads/'; 
         $config['allowed_types'] = 'gif|jpg|png'; 
         $config['max_size']      = 0; 
         $config['max_width']     = 0; 
         $config['max_height']    = 0;  
         $config['encrypt_name']  = true;

         $this->load->library('upload', $config);
			
         if ( ! $this->upload->do_upload('userfile')) {

            $error = array('error' => $this->upload->display_errors()); 

			$this->load->view('header');

            $this->load->view('customer/customer_add_form', $error); 

            $this->load->view('footer');

         }else{

			$data = array( 
	            'first_name' => $this->input->post('first_name'), 
	            'last_name' => $this->input->post('last_name'),
	            'image' => $this->upload->data('file_name'), 
	        ); 
				
	        $this->Customer_Model->insert($data); 
			
			redirect('customer/index');
        }
	}
	
	public function edit_customer_form(){
		
		 $id = $this->uri->segment('3'); 
		 
		 $data['result'] = $this->Customer_Model->selectOne($id);
		 
		 $this->load->view('header');
		 
         $this->load->view('customer/customer_edit_form',$data);
		 
		 $this->load->view('footer');
		
	}
	
	public function save_edit_customer(){
		
		 $config['upload_path']   = './uploads/'; 
         $config['allowed_types'] = 'gif|jpg|png'; 
         $config['max_size']      = 0; 
         $config['max_width']     = 0; 
         $config['max_height']    = 0;  
         $config['encrypt_name']  = true;

         $this->load->library('upload', $config);
			
         if ( ! $this->upload->do_upload('userfile')) {


           	$image = $this->input->post('old_image');

         }else{

			$image = $this->upload->data('file_name');
         }
		
		 $data = array( 
            'first_name' => $this->input->post('first_name'), 
            'last_name' => $this->input->post('last_name'),
            'image' => $image,
         ); 
		 
		 $id = $this->input->post('id');
			
         $this->Customer_Model->update($data,$id); 
		
		 redirect('customer/index');

	}
	
	public function delete_customer(){
		
		 $id = $this->uri->segment('3'); 
		 
		 $this->Customer_Model->delete($id); 
		 
		 redirect('customer/index');
	}
	
	
}

Views Customer

แก้ไข Views ไฟล์ customer_data.php เพิ่มส่วนของการแสดงรูปภาพ

<h3>Title</h3>

<a href="<?php echo base_url()?>index.php/customer/add_customer_form" class="btn btn-info">ADD</a>


<table class="table table-bordered" style="margin-top:10px">
	<tr class="active">
		<th>Image</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th width="10%">Edit</th>
		<th width="10%">Delete</th>
	</tr>
	<?php
		foreach($result as $r){
			echo "<tr>";
				
				$image_properties = array(
				        'src'   => 'uploads/'.$r->image,
				        'class' => 'post_images',
				        'width' => '80',
				        'height'=> '60',
				);

				echo "<td>";
					echo img($image_properties);
				echo "</td>";
				
				echo "<td>".$r->first_name."</td>";
				
				echo "<td>".$r->last_name."</td>";
				
				echo "<td><a href='".base_url()."index.php/customer/edit_customer_form/".$r->id."' class='btn btn-warning'>Edit</a></td>";
				
				echo "<td><a href='".base_url()."index.php/customer/delete_customer/".$r->id."' onclick='return confirm(\"Confirm Delete Item\")' class='btn btn-danger'>Delete</a></td>";
				
			echo "</tr>";
		}
	?>
</table>

แก้ไข Views ไฟล์ customer_add_form.php เพิ่ม input ส่วนของการ Upload ภาพ

		
		<h3>Add Data</h3>
         
		 <?php 
            echo form_open_multipart('customer/save_customer');
			
            echo form_label('First Name'); 
            echo form_input(array('class'=>'form-control','name'=>'first_name')); 
            echo "<br/>"; 
			
            echo form_label('Last Name'); 
            echo form_input(array('class'=>'form-control','name'=>'last_name')); 
            echo "<br/>"; 
			
			echo form_input(array('type'=>'file','name'=>'userfile')); 
			echo "<br/>"; 
			
            echo form_submit(array('id'=>'submit','value'=>'Add','class'=>'btn btn-success')); 
			
			echo anchor(base_url().'index.php/customer', 'Back',array('class'=>'btn btn-default'));
			
            echo form_close(); 
         ?>

แก้ไข Views ไฟล์ customer_edit_form.php เพิ่ม input ส่วนของการ Upload ภาพ

		
		<h3>Edit Data</h3>
         
		 <?php 
		 
			echo form_open_multipart('customer/save_edit_customer');
			
			echo form_hidden('id',$result[0]->id);

			echo form_hidden('old_image',$result[0]->image);  

			$image_properties = array(
			        'src'   => 'uploads/'.$result[0]->image,
			        'class' => 'post_images',
			        'width' => '200',
			        'height'=> '200',
			);

			echo img($image_properties);
			
			echo form_hidden('id',$result[0]->id); 
			echo "<br/>";	
            echo form_label('First Name'); 
            echo form_input(array('class'=>'form-control','name'=>'first_name','value'=>$result[0]->first_name)); 
            echo "<br/>"; 
			
            echo form_label('Last Name'); 
            echo form_input(array('class'=>'form-control','name'=>'last_name','value'=>$result[0]->last_name)); 
            echo "<br/>"; 
			
			echo form_input(array('type'=>'file','name'=>'userfile'));
            echo "<br/>"; 
			
            echo form_submit(array('id'=>'submit','value'=>'Save Edit','class'=>'btn btn-warning')); 
			
			echo anchor(base_url().'index.php/customer', 'Back',array('class'=>'btn btn-default'));

            echo form_close(); 
         ?>

ทดสอบการทำงาน

http://localhost/MyApp/index.php/customer

สามารถ เพิ่ม และ แก้ไข รูปภาพ ได้ เมื่อมาดูที่ Database ก็จะมี ข้อมูลของรูปภาพที่เรา Upload ไว้

Download SourceCode

View

Controller Test

การประยุกต์ใช้งาน กับ ฐานข้อมูล MySQL

Customer Controller

Views Customer

Popular Posts