So-net無料ブログ作成
Lancers.jp

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

たとえ簡易なものでも、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">

//ここで、アップロード用ボタンの最初に出てる数を決めておく。とりあえず、2つ。
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風味のアップローダー完成ザンス。便利ザーマス。




nice!(0)  コメント(2)  トラックバック(0) 

nice! 0

コメント 2

まさ

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

sandman

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

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。