JQueryのUploadifyをCakePHPで使用する。その後・・・

以前、書きかけの「AjaxアップローダーのUploadifyをCakePHPで使う方法」の続編です。

まずは、おさらいで、「基本的な流れ」の確認
(5)は削除です・・・。

  1. JQuery、Uploadifyのスクリプトをヘッダー内で定義する。
  2. UploadfyのCSSをヘッダー内で定義す る。
  3. ビュー(~.ctp)に、Javascritおよび必要なタグを記載する。
  4. Javascriptから呼ぶ、 アップロード処理をするphpプログラムを用意する。
  5. アップロード完了後のスクリプトを用意する。
  6. CakePHP のFromタグによるSubmitのPHPプログラムを用意する。


—————————————————————————————————————-
(1) JQuery、Uploadifyのスクリプトをヘッダー内で定義する。
(2) UploadfyのCSSをヘッダー内で定義す る。

・Uploadifyを使うときの専用layoutを用意しても良いでしょう。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<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で参照することもできる。

<?php
$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および、送信あたりは、下記のようにする。

<?php echo $form->create(‘FileUpload’, array(type’=>’post’, ‘action’=>’check’)); ?>
・・・・
<div><?php echo $form->button(‘ 送信 ’, array(‘onClick’=>”javascript:kick()”, ‘style’=>’cursor:pointer;’)); ?></div>

(4) Javascriptから呼ぶ、 アップロード処理をするphpプログラムを用意する。

・Uploadifyに添付されていたPHPコードをまねつつ、controllerにCakePHPコードを書く。
・これで、$thisとか使える。モデルにもアクセスできるハズ。

function complete($subDir = null, $sender_id = null) {

//レイアウトは使用しない。
$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は、終わっている。
  • フォームのその他、入力項目をデータベースに登録したりする。
  • アップロードのキャンセルをする場合は、既にアップロードされているサーバーのファイルを消す作業となる。

—————————————————————————————————————-
以上です。

コメントを残す

役立つ
面白い

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください