CakePHP その8 - fileHandlerコンポーネント -

たとえ簡易なものでも、CMSだったらファイルのアップロードくらいはしたいな、ってことでCakePHP用のファイルアップロード用コンポーネントのfileHandlerを使ってみた。
http://www.reversefolds.com/articles/show/filehandler

ちなみにアップロードはできても、削除はできないのでその辺は自前でヨロ。
使い方は、CakePHP Users in Japanの通り。
http://cakephp.jp/modules/newbb/viewtopic.php?topic_id=397&forum=9

これ、アップロード毎に、暗号名のついたディレクトリをつくるのか。
うー、ディレクトリがいっぱいになってしまう。
まあ、便利なのは確かなので、とりあえずこれで行く。

でも、ファイルを沢山アップしたいときもあるので、その時のためにJavaScriptでファイルボタンを増やしたりできるスクリプトをつくった。
とくに、JavaScriptヘルパーとか使ってないです。htmlにベタ書きです。
まずは、初期設定。/app/controller/component/file_handler.php の下記を変更。
var $_required はファイルの一回の最大数なので、これを増やす。ちなみに、0を含むようなので、上記は2ファイルの同時アップっつー事になる。とりあえず、最大10ファイルにしておく。

32行目：var $_required = 9;

つぎに、/app/views/upload/index.thtmlの変更

適当にJavascriptを書く。

<script language="javascript" type="text/javascript">

//ここで、アップロード用ボタンの最初に出てる数を決めておく。とりあえず、２つ。
var file_num = [1,2];

function addFile(){
	if(file_num.length>=10){
		alert('これ以上増やせません');
	}else{
		var n = file_num[file_num.length-1] + 1;
		
		var wrapper = document.getElementById('file_select');
		
		var child = document.createElement('label');
		child.id = 'file'+n;
			
		var child_input = document.createElement('input');
		child_input.type = 'file';
		child_input.setAttribute('name', 'userfile[]');
		
		var child_anchor = document.createElement('a');
		child_anchor.href = 'javascript:deleteFile('+n+')';
		child_anchor.appendChild(document.createTextNode('このファイルを消す'));
		
		
		child.appendChild(document.createTextNode('写真'+n));
		child.appendChild(child_input);
		child.appendChild(child_anchor);
	
		wrapper.appendChild(child);
		//alert(r);
	
		file_num.push(n);
	}
}

function deleteFile(_n){
	//alert(_n);
	for(var i=0;i<file_num.length;i++){
		if(file_num[i] == _n){
			file_num.splice(i,1);
			break;
		}
	}
	//
	var wrapper = document.getElementById('file_select');
	var child = document.getElementById('file'+_n);
	wrapper.removeChild(child);
}

</script>

アップロード周りのボタンを変更。
13〜16行目の

<input type="file" name="userfile[]"/>
<br/>
<input type="file" name="userfile[]"/>

を下記に変更

<div id="file_select">
<label id="file1">写真1
  <input type="file" name="userfile[]"/>
  <a href="#" onclick="deleteFile(1)">このファイルを消す</a>
  </label>
<label id="file2">写真2
  <input type="file" name="userfile[]"/>
  <a href="#" onclick="deleteFile(2)">このファイルを消す</a>
  </label>
</div>
<input type="button" value="画像を追加する"  onclick="addFile()" /><br />

これで、Ajax風味のアップローダー完成ザンス。便利ザーマス。

コメント 2

なんだかいつの間にかPHPのBLOGになってるじゃん！(笑)
すごいスキルアップしてる感じ！すげーぜ！！
by まさ (2007-07-30 18:36) 

>さま
アハハ、ほんとは人様に見せるのは恥ずかしいレベルだけど、恥も情報だと思えば、少しでも出していこうかなと。
CakePHPは結構ハマるよー。楽しい。こないだアップした例のもCakePHPだし。まだまだ機能を全然使い切れてないけどねー。
by sandman (2007-07-30 21:40)