cakePHPでjQueryファイルアップロード＆サムネイル生成
9月 18th, 2008
長いタイトルですみません。でも、これが全てです。
最近、会員制サイトに必ずあると言っても過言ではない、プロフィール画像のアップロード＆サムネイル生成をjQueryを利用してやってみよう！と言うサンプルです。
1, 材料を用意
jqueryは、ファイル名をjquery.js、jQuery Form Pluginは、jquery.form.jsとしてWWW_ROOTのjsディレクトリに保存。Thumbmakeは、controllers/componentsにthumbmake.phpとして保存しておいて下さい。
2, ファイルアップロード用のviewを作成
今回は仮に、views/buddies/index.ctpとして作成、保存しました。
[PHP]
link( array( ‘jquery.js’, ‘jquery.form.js’ ) ); ?>
プロフィールアイコンアップロード
create( ‘Buddy’, array( ‘type’=>’file’, ‘action’ => ‘index’, ‘id’ => ‘BuddyIconUpload’ ) ); ?>
file( ‘image’, array( ‘label’=>’画像’ ) ); ?>
button( ‘アップロード’, array( ‘onClick’ => ‘$(“#BuddyIconUpload”).ajaxSubmit({target: “#uploadFile”,url: “/buddies/upload”}); return false;’));?>
[/PHP]
3, ファイルをアップロードして、サムネイルを作成するcontrollerを作成
今回は、buddies_controller.phpを作成し、uploadと言うアクションで実装した例になります。
[PHP]
function upload () {
if ( !isset( $this->data ) ) return;
$file_name = $this->data['Buddy']['image']['name'];
$file_path = WWW_ROOT.’files’.DS;
if ( !move_uploaded_file( $this->data['Buddy']['image']['tmp_name'], $file_path.$file_name ) ) $this->set( ‘error’, ‘ファイルのアップロードに失敗しました。’ );
if ( !$this->Thumbmake->setImage( $file_path.$file_name, $file_path.’thumb_’.$file_name )
|| !$this->Thumbmake->resizeCrop( 120, 120 ) || !$this->Thumbmake->save() ) $this->set( ‘error’, ‘サムネイルの作成に失敗しました。’ );
$this->set( ‘master_file’, DS.’files’.DS.$file_name );
$this->set( ‘thumb_file’, DS.’files’.DS.’thumb_’.$file_name );
}
[/PHP]
4, upload用のviewを作成
[PHP]
Master
image( $master_file ); ?>
Thumbnail
image( $thumb_file ); ?>
[/PHP]
4, 実行してみる
こんなん出ました。
参考にしたサイト様
Posted in: 未分類
コメントする