Sử dụng lớp Upload File trên CodeIgniter

File upload là một lớp được CodeIgniter hỗ trợ dùng cho các chức năng liên quan đến upload file, ảnh lên hệ thống. Trong bài này mình xin trình bày cách thức sử dụng lớp upload file trên CodeIgniter.

Các công cụ cần thiết.

Chúng ta sẽ đi xây dựng môt chương trình upload ảnh có sử dụng lớp Upload File trên CodeIgniter theo từng bước ở dưới đây.

1. Tạo mô-đun file.

Chúng ta tạo một mô-đun tên là file trong thư mục modules với cấu trúc như sau.

Sử dụng lớp Upload File trên CodeIgniter

Trong thư mục controllers chúng ta sẽ tạo một file tên là file.php, và copy đoạn code bên dưới vào.

<?php
class File extends CI_Controller{
	public function __construct(){
		parent::__construct();
		#Tải thư viện  và helper của Form trên CodeIgniter
		$this->load->helper(array('form', 'url'));
		$this->load->library(array('session'));
	}
	
	public function index(){
		$this->load->view('file-template');
	}
	
	public function upload(){
		$a_Data = array();
		$b_Check = false;
		if($_SERVER['REQUEST_METHOD'] == 'POST'){
			if($_FILES["file"]["name"]){
				# Tạo thư mục 
				$album_dir  =  'uploads/images/';
				if(!is_dir($album_dir)){
					create_dir($album_dir);
				}
				#upload.
				$config['upload_path']	 =  $album_dir;
				$config['allowed_types'] =  'jpg|png|jpeg|gif';
				$config['max_size'] =  5120;
					
				$this->load->library('upload', $config);
				$this->upload->initialize($config);
				$image =  $this->upload->do_upload("file");
				$image_data  = 	$this->upload->data();
				if($image) {
					#upload execute.
					$info['source'] =	$config['upload_path'].$image_data['file_name'];
					$b_Check = true;
					$this->session->set_userdata('album', $image_data);
					redirect(base_url('file/show'));
				} else {
					$b_Check = false;
				}
			}
		}
		$a_Data['b_CheckUpload'] = $b_Check;
		$this->load->view('file-template', $a_Data);
	}
	
	public function checkImages(){
		$a_Data = array();
		$a_Album = $this->session->userdata('album');
		if( is_array($a_Album) ){
			$a_Data['album'] = $this->session->userdata('album');
		}
		$this->load->view('show-template', $a_Data);
	}	
}

Giải thích cho đoạn chương trình ở trên:

- Đoạn code $_SERVER['REQUEST_METHOD'] == 'POST' dùng để kiểm tra kiểu mà chúng ta đẩy dữ liệu lên Server.

- Đoạn code create_dir($album_dir); giúp tạo một thư mục để lưu trữ ảnh. Hàm is_dir('tên_thư_mục') giúp kiểm tra xem thư mục đã tồn tại hay chưa, nếu chưa thì tạo thư mục đó.

- Mảng $config['tham_số'] nhằm tạo các cấu hình cần thiết cho lớp upload trước khi xử lý file upload lên.

- Đoạn code $this->load->library('upload', $config); tải lớp upload file lên.

- Đoạn code $this->upload->initialize($config); khởi tạo cấu hình cho lớp upload.

- Đoạn code $this->upload->do_upload("file"); thực hiện quá trình upload file

- Đoạn code $this->upload->data(); lấy thông tin file upload lên.

Trong thư mục views chúng ta tạo hai files tên là file-template.php để hiển thị form upload file, với nội dung là

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
	#body{margin:10px auto; width: 800px; font-size: 90%; }
	form {width: 600px; margin: 40 auto;}
	form div{padding: 0 0 5px 0;}
	label {width: 120px; display: block; float: left; clear: left; font-weight: bold;}
	span.error p{
          width: auto; padding: 0 0 0 120px; 
          font-style: italic; color: red; font-size: 90%;
        }
	span.success {color: green;}
	.form{ width: 150px;}
	</style>
	<meta charset="utf-8">
	<title>Title | Sử dụng lớp Upload File trên CodeIgniter</title>
</head>
<body>
	<div id="body">
	   <h2>Sử dụng lớp Upload File trên CodeIgniter</h2>
	      <form action="<?php echo base_url()."file/upload" ?>" method="post" id="form" enctype="multipart/form-data" >
		<fieldset>
		    <legend>Sử dụng lớp Upload File trên CodeIgniter</legend>
			<div>
                             <span class="error">
                             <?php if(isset($b_CheckUpload) && $b_CheckUpload == false){
                                   echo "Upload không thành công. Hãy thử lại !";
                              }?>
                             </span>
                             </div>
		             <div>
				<label for="file">Browse to File</label>
				<input class="form" type="file" name="file" size="50" />
				<span class="error"><?php echo form_error('username'); ?></span>
			       </div>
			       <div><input type="submit" id="save" value="Upload" /></div>
			</fieldset>
		</form>
	</div>
</body>
</html>

Và file thứ hai là show-template.php để hiện thỉ ảnh đã upload nếu thành công, với nội dung là.

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
	#body{margin:10px auto; width: 800px; font-size: 90%; }
	form {width: 600px; margin: 40 auto;}
	form div{padding: 0 0 5px 0;}
	label {width: 120px; display: block; float: left; clear: left; font-weight: bold;}
	span.error p{
              width: auto; padding: 0 0 0 120px; 
              font-style: italic; color: red; font-size: 90%;
        }
	span.success {color: green;}
	.form{ width: 150px;}
	</style>
	<meta charset="utf-8">
	<title>Title | Sử dụng lớp Upload File trên CodeIgniter</title>
</head>
<body>
	<div id="body">
	     <h2>Sử dụng lớp Upload File trên CodeIgniter</h2>
	     <a href="<?php base_url();?>file" title="Sử dụng lớp Upload File trên CodeIgniter" >Quay lại</a>
	     <span>File ảnh vừa upload lên là</span>
		<?php if(is_array($album)) {?>
			<img src="<?php echo base_url() ?>uploads/images/<?php echo $album['file_name'];?>" width="200" height="200" />
		<?php }?>
	</div>
</body>
</html>

2. Điều hướng lại đường dẫn.

Ta mở file routes.php trong thư mục config bằng notepad++, và copy đoạn mã sau đây vào.

//file
$route['file'] 		= "file/index";
$route['file/upload'] 	= "file/upload";
$route['file/show'] 	= "file/checkImages";

3. Chạy chương trình trên trình duyệt.

Chúng ta chạy chương trình trên Firefox để kiểm tra kết quả

Sử dụng lớp Upload File trên CodeIgniter

Nếu upload thành công thì ta sẽ có kết quả như sau:

Sử dụng lớp Upload File trên CodeIgniter

Để thực hành bài tạo chương trình upload file trên CodeIgniter, các bạn hãy download file ở dưới về và thực hành lại.

su-dung-lop-upload-file-tren-codeigniter.zip

Chúc các bạn thành công :)

Tags: