[Site] 画像アップロード (登録)

タグ :

作成サイト「koweboo」についてまとめるシリーズです。
今回は前記事に続いて「画像の登録」についてまとめます。

登録フォームの作成

ユーザー画像のアップロード用フォームですが、マイページ編集画面に追加で設けます。
マイページの編集画面については過去記事「マイページ機能 その2」を参照してください。
ビューの「Users/edit.ctp」ファイルに以下のコードを追加します。

echo $this->Form->create('Post', array(
				'type' => 'file'
				));
echo $this->Form->file('image_data', array(
				'label' => __('Name', true),
				'value' => $user_name
				));

1行目の create 部分の「type」を「file」として設定しておけば、ファイルを扱うフォームとして使えます。

4行目の「file」フォームを設置することで選択ボタンが表示されるようになり、クリックでファイル選択ダイアログが表示されるようになります。

登録処理の作成

画像登録処理を作成します。
フォーム作成と同じく、過去記事の登録処理を参照してください。
コントローラの「UsersController.php」の「edit()」の POST 送信かどうかの分岐命令の中に以下のコードを追加します。

// POST送信なら
if($this->request->is('post')) {
	if(!empty($this->request->data['Post']['image_data']['name'])) {
		$check = $this->Image->SetImage($this->request->data['Post']['image_data']);
		if(!$check) {
			$this->Session->setFlash(__('Failed in loading the image. Please, try again.'));
			$this->redirect(array('action' => 'edit'));
		}
		$type = $this->Image->Resize(IMG_USERSIZE_S);
		if(!$type) {
			$this->Session->setFlash(__('Could not register with that image.'));
			$this->redirect(array('action' => 'edit'));
		}
		$name = Md5(microtime());
		$this->Image->Save(IMG_STR_S, $name, IMG_UPLOAD_USER);
		$this->Image->Resize(IMG_USERSIZE_M);
		$this->Image->Save(IMG_STR_M, $name, IMG_UPLOAD_USER);
		$data['UserImage'][0]['filename'] = $name;
		$data['UserImage'][0]['type'] = $type;
	}
	... 省略 ...

3行目の分岐にてファイルの選択があったかどうかをチェックしています。

4行目〜8行目にて選択されたファイルが正しいファイルかどうかをチェックしています。
ファイルが正常に読み込めない等になるとエラーと判断します。
(ファイルが正常に読み込めない場合 SetImage() の返り値が「false」となります)

9行目〜13行目では、画像のリサイズ処理と同時に画像の種類を取得します。
Resize() の引数の「IMG_USERSIZE_S」には数値「16」が入ります(基本仕様より)。
また、画像種類が GIF、JPG、PNG 以外だとエラーとなります。

14行目〜17行目にてファイル名を乱数値として取得し、指定のフォルダ内へアップロードします。
画像のサイズは大と小の2通りを保存します。
Resize() の引数の「IMG_USERSIZE_M」には数値「104」が入ります(基本仕様より)。

18行目〜19行目ではデータベース登録用の配列へデータを格納します。
省略となっていますが、過去記事のソースコードの saveAll() にてユーザー画像テーブルへも保存されます。

これで画像の登録ができるはずです。

表示処理の作成

最後にマイページでの画像表示についてですが、過去記事「マイページ機能 その1」のデータ取得処理の変更無しでも画像取得はできます。
モデルにてアソシエーションされているので、データ取得時に自動で取得できます。

ビューへの値渡しの部分では以下のコードを記述します。

$this->set('user_img',
	(empty($data['UserImage']) ? IMG_NONE :
		$data['UserImage'][0]['filename']
	));
$this->set('img_type',
	(empty($data['UserImage']) ? IMG_NONTYPE :
		$data['UserImage'][0]['type']
	));

取得した画像データのファイル名が「null(無い)」であれば、未登録用の画像を表示させるためにデフォルト画像のファイル名を渡し値にセットします。
画像が登録してあるなら、ファイル名を渡し値にセットします。
別に分岐処理で作成してもよかったのですが、三項演算子を用いてスッキリとさせてみました。

ユーザーのマイページは以下のような表示になります。

site_image_3

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed