I love iPhone, Android, Cocos2d-x
« 1月に読んだ本
CakePHP jQuery を使用した Ajax ファイルアップロード
下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -
上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。
jQuery 使用準備
jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>
ビューにアップロードするフォームを作成する
今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp
<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>
コントローラの処理
views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。
function upload() {
if (!$this->data['User']['upload_file']) {
$this->set('error','アップロードするファイルを選択してください');
$this->render('upload','ajax');
} else {
if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
$this->set('error','アップロードできる画像は JPEG のみです');
$this->render('upload','ajax');
} else {
$filename = '/files/'.intval(rand()).'.jpg';
rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
$this->set('filename', $filename);
$this->render('upload','ajax');
}
}
}
Ajax が返すビューを作成する
/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。
<?php if (!empty($error)): ?> <p><?php echo $error;?></p> <?php else: ?> <p>Upload successful</p> <?php echo $html->image($filename); ?> <?php endif; ?>
以上で jQuery を使用して Ajax で画像のアップロードができます。
関連する投稿
6 comments
コメントをどうぞ
Additional comments powered by BackType
[...] CakePHP jQuery を使用した Ajax ファイルアップロード [...]
[...] CakePHP jQuery を使用した Ajax ファイルアップロード | Sun Limited Mt. [...]
[...] 以下のサイトを参考にさせていただきました。 Sun Limited.MT [...]
[...] CakePHP jQuery を使用した Ajax ファイルアップロード | Sun Limited Mt. [...]
とても参考になります。ありがとうございます。
[...] CakePHP: Jquery.uploadのシンプルな利用 2011/04/10 CakePHPフレームワークを使っています。editビューの中で、ごく簡単にajaxでファイルアップロードしたかったので、シンプルで手軽な Jquery.upload.jsを使って組み込んでみました。コードの中に少しJavaScriptも書き足さなくてはいけないので、あまりかっこよくはないのですが、CakePHP Media Pluginのように専用のテーブルを作るほどには大げさでなく、「CakePHP jQuery を使用した Ajax ファイルアップロード」はsubmitしてしまって少し困るということで、書いたものです。参考になれば幸いです。 １）フォーム部分（レコードのidを別途に渡したかったのでJquery.uploadの<div>でフィールドを囲うやり方を使っています） <?php echo $this->Form->create(‘Model’,array(‘onsubmit’=>’return false;’)); ?> <div id=”upfields”> <?php echo $this->Form->hidden(‘upload_id’,array(‘id’=>’upload_id’, ‘value’ => $this->data['Model']['id'])); ?> <?php echo $this->Form->input(‘upload_file’,array(‘type’=>’file’,'id’=>’upload_file’)); ?> <?php echo $this->Form->button(‘アップロード’,array(‘id’=>’upload_button’)); ?> </div> <?php echo $this->Form->end(); ?> <div id=”upload_msg”></div> [...]