JQueryのUploadifyをCakePHPで使用する。その後・・・
以前、書きかけの「AjaxアップローダーのUploadifyをCakePHPで使う方法」の続編です。
まずは、おさらいで、「基本的な流れ」の確認
(5)は削除です・・・。
- JQuery、Uploadifyのスクリプトをヘッダー内で定義する。
- UploadfyのCSSをヘッダー内で定義す る。
- ビュー（～.ctp）に、Javascritおよび必要なタグを記載する。
- Javascriptから呼ぶ、 アップロード処理をするphpプログラムを用意する。
アップロード完了後のスクリプトを用意する。- CakePHP のFromタグによるSubmitのPHPプログラムを用意する。
—————————————————————————————————————-
(1) JQuery、Uploadifyのスクリプトをヘッダー内で定義する。
(2) UploadfyのCSSをヘッダー内で定義す る。
・Uploadifyを使うときの専用layoutを用意しても良いでしょう。
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title><? echo $title_for_layout; ?></title>
<!–JAVASCRIPT–>
<script src=”<?= $html->url(‘/js/jquery-1.3.2.min.js’)?>” type=”text/javascript”></script>
<script src=”<?= $html->url(‘/js/jquery.uploadify.js’)?>” type=”text/javascript”></script>
<!–CSS–>
<link rel=”stylesheet” href=”<?= $html->url(‘/css/uploadify.css’)?>” type=”text/css” media=”screen”/>
(3) ビュー（～.ctp）に、Javascritおよび必要なタグを記載する。
・Viewでは、controllerからデータを受けて、JavaScriptで参照することもできる。
$maxSize = $this->data['max_size'];
$maxAttachment = $this->data['Management']['max_attachment'];
?>
<script type=”text/javascript” charset=”utf-8″> // <![CDATA[
$(document).ready(function(){
var maxsize = <?= $maxSize?>;
var maxattachment = <?= $maxAttachment?>;
$('#uploadify').uploadify({
'uploader': path + '/uploadify.swf',
//'script': path + '/uploadify.php', // Uploadify付属のサーバー側PHPを使わない。
'script': '/file_uploads/complete/' , // controllerで関数を作成する。この内容は、次の(4)
'folder': '/store/' + sdir,
'cancelImg': path + '/cancel.png',
'fileExt': "*.*",
'fileDesc': "data",
'multi': true,
'queueID': 'fileQueue',
'queueSizeLimit' : maxattachment,
'sizeLimit': maxsize * 1024,
・・・・
function kick(){
if(window.confirm('この内容でよろしいですか。')) {
$('#uploadify').uploadifyUpload();
}
}
・HTMLタグのFormおよび、送信あたりは、下記のようにする。
・・・・
<div><?php echo $form->button(' 送信 ', array('onClick'=>"javascript:kick()", 'style'=>'cursor:pointer;')); ?></div>
(4) Javascriptから呼ぶ、 アップロード処理をするphpプログラムを用意する。
・Uploadifyに添付されていたＰＨＰコードをまねつつ、controllerにCakePHPコードを書く。
・これで、$thisとか使える。モデルにもアクセスできるハズ。
//レイアウトは使用しない。
$this->layout = null;
$this->autoLayout = false;
//先に、echo() で返す。これがないと、Ajaxが戻りを受け取れず固まる？
echo "1";
//アップロード情報がないなら終了
if (empty($_FILES)) {
exit();
}
/*--------------------------------------------------------------*/
// アップロードしたファイルの生成。 */
/*--------------------------------------------------------------*/
$rtnArray = $this->_tmpdir($subDir); // これは、自作関数・・・、app_controllerで定義してます。
$targetPath = $rtnArray['tmp'];
$targetPath = str_replace(‘//’,'/’,$targetPath);
$targetFile = $targetPath . $_FILES['Filedata']['name'];
$tempFile = $_FILES['Filedata']['tmp_name'];
switch ($_FILES['Filedata']['error']) {
case 0:
$msg = “Success.”; // comment this out if you don’t want a message to appear on success.
break;
case 1:
$msg = “The file(” . $_FILES['Filedata']['name'] . “) is bigger than this PHP installation allows”;
break;
case 2:
$msg = “The file(” . $_FILES['Filedata']['name'] . “) is bigger than this form allows”;
break;
case 3:
$msg = “Only part of The file(” . $_FILES['Filedata']['name'] . “) was uploaded”;
break;
case 4:
$msg = “No file(” . $_FILES['Filedata']['name'] . “) was uploaded”;
break;
case 6:
$msg = “Missing a temporary folder”;
break;
case 7:
$msg = “Failed to write file(” . $_FILES['Filedata']['name'] . “) to disk”;
break;
case 8:
$msg = “File upload stopped by extension”;
break;
default:
$msg = “unknown error ” . $_FILES['Filedata']['error'];
break;
}
if ($_FILES['Filedata']['error'] > 0) {
exit();
}
/*————————————————————–*/
// アップロードしたファイルから生成。 */
/*————————————————————–*/
move_uploaded_file($tempFile, $targetFile);
exit();
}
(5) アップロード完了後のスクリプトを用意する。
(6) CakePHP のFromタグによるSubmitのPHPプログラムを用意する。
- $form->create(‘FileUpload’, array(type’=>’post’, ‘action’=>’check’) のcontroller関数。
- 既に、(4)のcompleteは、終わっている。
- フォームのその他、入力項目をデータベースに登録したりする。
- アップロードのキャンセルをする場合は、既にアップロードされているサーバーのファイルを消す作業となる。
—————————————————————————————————————-
以上です。
Leave a Reply