☰

Written by Manabu Bannai

【CodeIgniter】ファイルアップロード、サムネイル生成をする方法

CodeIgniter PROGRAMMING

CodeIgniterでファイルのアップロードとサムネイル生成する方法をまとめです。

もくじ

それではまとめていきます。

CodeIgniterの初期設定

初期設定をする

.htaccessを作成
applicationを同階層に以下を設置

以下の部分に注意してください。
RewriteBase /file_uploading/ //フォルダ名に合わせて変更する


    RewriteEngine On
    RewriteBase /file_uploading/  //フォルダ名に合わせて変更する
 
    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]
 
    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]
 
    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]

 

    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin
 
    ErrorDocument 404 /index.php

編集ファイル：config/config.php

$config['base_url']	= 'http://localhost/file_uploading';

$config['index_page'] = '';

編集ファイル：config/autoload.php

$autoload['helper'] = array("url", "form", "file");

ギャラリーのビューを作成していく

新規作成ファイル：views/gallery.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ギャラリー</title>
</head>
<body>

<div id="gallery">
</div>

<div id="upload">
</div>

</body>
</html>

CodeIgniterでアップロードフォームを作成する

フォームを作成し、POST先を決める

編集ファイル：views/gallery.php

<div id="upload">
<?php
	// galleryに情報がPOSTされる
	echo form_open_multipart("gallery");
?>
</div>

次に、galleryのコントローラーを作っていきます。

galleryコントローラーを作成する

新規作成ファイル：controller/gallery.php

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

class Gallery extends CI_Controller {
	function index(){
		// galleryのビューを読み込む
		$this->load->view("gallery");
	}

}

ファイルアップロードクラスを使って、フォームをさらに作り込んでいく

編集ファイル：views/gallery.php

<div id="upload">
<?php
	// galleryに情報がPOSTされる
	echo form_open_multipart("gallery");

	// ファイルアップロードクラスを利用します。
	// デフォルトのファイルアップロード名は『userfile』なので、これを利用すると便利です。
	echo form_upload("userfile");

	echo form_submit("upload", "アップロード");
	echo form_close();
?>
</div>

ここまでで、以下のようなベーシックなフォームができあがります。
まだ、アップロードボタンは動作しません。
◆file_upload_basic

galleryコントローラーを作り込んでいく

編集ファイル：controller/gallery.php


class Gallery extends CI_Controller {
	function index(){

		// Gallery_modelはまだ未作成なので、これから作成していきます。
		$this->load->model("Gallery_model");

		// アップロード情報がPOSTされたかどうかで条件分岐
		if($this->input->post("upload")){

			// Gallery_modelのモデル内にあるdo_uploadメソッドはまだ未作成なので、これから作成していきます。
			$this->Gallery_model->do_upload();
		}

		// galleryのビューを読み込む
		$this->load->view("gallery");
	}

}

それでは、Gallery_modelを作成していきます。

Gallery_modelの作成

新規作成ファイル：model/gallery_model.php

まずはじめに、以下のようにライブラリを読み込みます。

<?php
class Gallery_model extends CI_Model{
	function do_upload(){
		// 第2引数で条件を受け取ることができます。
		$this->load->library("upload", $config);
		
		// アップロードライブラリの読み込み後は、以下のように実行します。
		$this->upload->do_upload();
	}
}

ファイルアップロードライブラリの第2引数の設定

第2引数の条件を以下のように記述します。

$config = array(
	// ファイルのアップロード制限
	"allowed_types"=>"jpg|jpeg|gif|png",

	// ファイルのアップロード先を決める
	"upload_path"=>$this->gallery_path
);

次に、ファイルアップロード先に指定した、gallery_pathを定義します。

// ファンクション内に記述しないこと
var $gallery_path;

次に、gallery_pathを取得するプログラムを作成します。

var $gallery_path;

function Gallery_model(){
	parent::__construct();

	// realpathとは
	// realpath() は、入力 path のシンボリックリンクをすべて展開し、正規化した絶対パスを返します。

	// APPPATHとは
	// CodeIgniterのApplicationフォルダの階層を指します
	$this->gallery_path = realpath(APPPATH. "../images");
}

以上で、ファイルアップロードの機能が完成しました。
ファイルアップロードをすると、imagesフォルダに格納されます。

最終的なコードは以下です。
完成コード：model/gallery_model.php

<?php
class Gallery_model extends CI_Model{

	var $gallery_path;

	function Gallery_model(){
		parent::__construct();

		// realpathとは
		// realpath() は、入力 path のシンボリックリンクをすべて展開し、正規化した絶対パスを返します。

		// APPPATHとは
		// CodeIgniterのApplicationフォルダの階層を指します
		$this->gallery_path = realpath(APPPATH. "../images");
	}

	function do_upload(){
		$config = array(
			// ファイルのアップロード制限
			"allowed_types"=>"jpg|jpeg|gif|png",

			// ファイルのアップロード先を決める
			"upload_path"=>$this->gallery_path
		);

		// 第2引数で条件を受け取ることができます。
		$this->load->library("upload", $config);
		$this->upload->do_upload();
	}

}

※参考1
その他のconfigオプションを設定したい場合は、CodeIgniterマニュアルの『設定項目』をご確認ください。
ファイルアップロードクラス : CodeIgniter ユーザガイド 日本語版

※参考2
3MB以上の画像は受け付けたくない場合は以下のように記述します。

"max_size" => 3000

アップロードされた画像のサムネイルを生成する

imagesフォルダ内部にthumbsフォルダを作成する

次に、イメージライブラリを読み込みます。

編集ファイル：models/gallery_model.php

$config = array(
);

// イメージライブラリは次のように引数をとります。
// 引数はライブラリ読み込み前に定義しておきます。
$this->load->library("image_lib", $config);

アップロードライブラリからファイルのパスを取得する

編集ファイル：models/gallery_model.php


// アップロードライブラリを読み込み、$image_dataに格納
$image_data = $this->upload->data();

// アップロードライブラリで生成された$image_dataから、
// 以下のようにアップロードファイルのパスを取得できる
$config = array(
	"source_image"=> $image_data["full_path"]
);

$this->load->library("image_lib", $config);

その後、次のように$configに必要情報を追記していき、最後にリサイズのライブラリを読み込みます

$config = array(
	"source_image"=> $image_data["full_path"],
	"new_image" =>$this->gallery_path . "/thumbs",

	// リサイズされるときや、固定の値を指定したとき、もとの画像のアスペクト比を維持するかどうかを指定する
	"maintain_ration"=>true,
	"width"=>150,
	"height"=>100
);

$this->load->library("image_lib", $config);
$this->image_lib->resize();

アップロードライブラリはその他にもいろいろな引数をとります。
詳細はマニュアルからどうぞ。
画像操作クラス : CodeIgniter ユーザガイド 日本語版

この時点で、画像アップロードをするとサムネイルがフォルダ内に生成されるようになります。
完成コードは以下です。

function do_upload(){
	$config = array(
		// ファイルのアップロード制限
		"allowed_types"=>"jpg|jpeg|gif|png",

		// ファイルのアップロード先を決める
		"upload_path"=>$this->gallery_path,

		// 3MB以上の画像は受け付けない
		"max_size" => 3000
	);

	// 第2引数で条件を受け取ることができます。
	$this->load->library("upload", $config);
	$this->upload->do_upload();

	// アップロードライブラリを読み込み、$image_dataに格納
	$image_data = $this->upload->data();

	// アップロードライブラリで生成された$image_dataから、
	// 以下のようにアップロードファイルのパスを取得できる
	$config = array(
		"source_image"=> $image_data["full_path"],
		"new_image" =>$this->gallery_path . "/thumbs",

		// リサイズされるときや、固定の値を指定したとき、もとの画像のアスペクト比を維持するかどうかを指定する
		"maintain_ratio"=>true,
		"width"=>150,
		"height"=>100
	);

	// イメージライブラリは次のように引数をとります。
	// 引数はライブラリ読み込み前に定義しておきます。
	$this->load->library("image_lib", $config);
	$this->image_lib->resize();
}

アップロードされた画像をビューで読み込む

galleryコントローラーで画像取得の記述を追加する

編集ファイル：controllers/gallery.php

// get_imagesメソッドはまだ未完成なので、これから作っていきます
$data["images"] = $this->Gallery_model->get_images();
$this->load->view("gallery", $data);

get_imagesメソッドを作っていく

編集ファイル：models/gallery_model.php

// imagesフォルダのコンテンツを読み込む機能
function get_images(){

	// scandirでは、指定したパスのディレクトリの内容を配列で取得できる
	$files = scandir($this->gallery_path);

	// array_diffでは配列の差分を計算します
　　　　//  次の項で利用する、if(isset($images) && count($images))の判定に利用します。
	$files=array_diff($files, array(".", "..", "thumbs"));

imagesの情報を取得する

編集ファイル：models/gallery_model.php

// まずはarrayを実行
$images = array();

// 実行済のarrayにforeachで値を挿入していく
foreach($files as $file){
	$images[]= array(
		// URLバージョンのギャラリーパスを利用
		"url" =>$this->gallery_path_url . $file,
		"thumb_url" =>$this->gallery_path_url."thumbs/".$file
	);
}
return $images;

gallery_path_urlを定義します。

class Gallery_model extends CI_Model{
	var $gallery_path;

	// URLバージョンのギャラリーパスを取得
	var $gallery_path_url;

	function Gallery_model(){
		parent::__construct();

		// realpathとは
		// realpath() は、入力 path のシンボリックリンクをすべて展開し、正規化した絶対パスを返します。

		// APPPATHとは
		// CodeIgniterのApplicationフォルダの階層を指します
		$this->gallery_path = realpath(APPPATH. "../images");

		$this->gallery_path_url = base_url(). "images/";
	}

※最終的なget_imagesファンクションのコードは以下となります。

function get_images(){

	// scandirでは、指定したパスのディレクトリの内容を配列で取得できる
	$files = scandir($this->gallery_path);

	// array_diffでは配列の差分を計算します
	$files=array_diff($files, array(".", "..", "thumbs"));

	// まずはarrayを実行
	$images = array();

	// 実行済のarrayにforeachで値を挿入していく
	foreach($files as $file){
		$images[]= array(

			// URLバージョンのギャラリーパスを利用
			"url" =>$this->gallery_path_url . $file,
			"thumb_url" =>$this->gallery_path_url."thumbs/".$file
		);
	}
	return $images;
}

ギャラリーを表示するビューをつくっていく

編集ファイル：views/gallery.php

<div id="gallery">

<?php	if(isset($images) && count($images)): >?
<?php endforeach; ?>
<?php else: ?>
	<div id="blank_gallery">画像をアップロードしてください</div>
<?php endif;?>

</div>

imagesフォルダを空にしてから、上記プログラムを実行すると
画像をアップロードしてくださいと表示されます。

それでは、画像がアップロードされたあとの処理をつくっていきます。

画像アップロード後にギャラリー表示するプログラムの作成

編集ファイル：views/gallery.php

<div id="gallery">
	<?php	if(isset($images) && count($images)):
	 // フォルダ内に画像がある場合は以下を実行 
		foreach($images as $image):
	?>
		<div class="tumbs">
			<a href="<?php echo $image["url"]; ?>">
				<img src="<?php echo $image["thumb_url"]; ?>">
			</a>
		</div>
	<?php endforeach; ?>

	<?php else: ?>
		<div id="blank_gallery">画像をアップロードしてください</div>
	<?php endif;?>

</div>

以上で完成です！
画像アップロード処理と画像加工機能をもったプログラムが完成しました。

コードはgithubに公開しています。
manabubannai/file_uploading

※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。

関連記事

【完全保存版】CodeIgniterで『ログインと会員登録機...

CodeIgniter

【CodeIgniter】ページネーション機能を実装する方法...

CodeIgniter

【3分で完了】CodeIgniterをつかって『Gmailか...

CodeIgniter

【CodeIgniterの基礎】ビューの作成、複数ビューの読...

CodeIgniter

スキル学習のまとめ記事（※有料記事を含む）

個人で稼ぎ、自由に生きる為の、Webマーケ入門教材【10年の知識】

MARKETING

ブログ型アフィリエイトの完全講義【ブログ歴６年の僕の集大成です】

Blog

アフィリエイト学習の完全マップ【知識ゼロ→月10万円を目指す方法】

Affiliate

SEO対策の完全マップ【入門・基礎・中級・上級：16記事で解説】

SEO

【完全初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】

PROGRAMMING

【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

PROGRAMMING

HOME >  CodeIgniter >  【CodeIgniter】ファイルアップロード、サムネイル生成をする方法