画像をスケジュールに載せたいなぁと思ったので、実装した。
最初はさっぱりやり方がわからなかったが、根性ですね。
大まかな仕様は
- inputのtype=”file”を設置して、ファイルを選択したらsubmitせずにプレビューする
- アップロードできるファイルは拡張子がjpg、gif、pngだけ
ざっとこれだけ。
これだけなんだが、ざっと5時間ほどもかかったぞ！（悔
まず拡張子のチェックだが、これは簡単。
選択されたファイル名をチェック。
inputのchangeイベントで拾います。
$('input[type=file]').change(function() {
// 拡張子で判定
var dir = $(this).val();
ext = dir.split(".").reverse();
ext_nm = ext[0];
if(!ext_nm.match(/(jpg|gif|png)/i)){
$(this).val("");
$("div#input_alert").text("jpg,gif,pngのみアップロードできます").css("color","red").css("display","inline");
$("#image_thumb").css("display","none");
return false;
}else{
$("div#input_alert").css("display","none");
}
ソースがイタいのは勘弁してください。
ファイル名を配列にぶったぎって、拡張子部分を正規表現でチェック。
で、違ったらアラートを出すと同時に入力されたパスをクリアしちゃうと。
アップロード部分はプラグインに頼りました。
http://lagoscript.org/jquery/upload
なんか一番シンプルそうだったのでこれにした。
まず、画像ファイルをアップしてサーバ側のphpでimagickを使ってサムネイルを生成する。
そうしたら、生成した画像ファイルのパスを返すという感じ。
返されたパスをimgタグにぶち込んでshowする。
ただ、そのままだと返ってくるまで動きもなく待たされるのでloading.gifを表示する。
// アップロード
$("#image_thumb").html('
').show();
$(this).upload('uploader.php,function(res){
// 画像のURLを取得して表示する
var r = Math.floor(Math.random()*100000);
$("#image_thumb").html('
').show();
}, 'html');
途中でランダムな数字を引数として渡しているのは、キャッシュ回避な苦肉の策です。
サーバ側の処理は$_FILEでいろいろやると。
あー疲れた。
さて、自転車の練習するかな。