以前、jQuery.uploadでアップロード画像のサムネイルの作成というエントリーを書いたので、それの実装を作ってみました。アップロードする画像を選択すると、アップロードされ、それのサムネイルが表示されます。
また、ページを離れるときに画像をJavascriptで削除していますが、実際に使うときは使わない場面も多いと思いますので、その部分は適当に削除するなり、なんなりして下さい。
デモ：http://demo.torounit.com/jquery.upload/
script.js(ajaxでのアップロード等々)
[js]
jQuery(function($){
//送信ボタンの非表示
$(‘#submit’).hide();
//フォームの内容が変更されたとき
$(‘#img’).change(function() {
var preview = $(‘#preview’);
//現在表示されているものを消す。
preview.find("img").fadeOut(300);
//アップロード
$(this).upload(
‘upload.php’,
$("form").serialize(),
function(html){
//サムネイルの表示
preview.html(html).animate({"height":preview.find("img").height()+"px"},300,function(){
preview.find("img").hide().fadeIn(300);
});
},’html’);
});
//離れるときに画像を削除
$(window).bind("beforeunload",function(){
var unlinkFile = $("#postPhotoName").val();
$.ajax({
async: false,
cache: false,
type: "POST",
url: "upload.php",
data: "postPhotoName="+unlinkFile
});
});
});
[/js]
upload.php(アップロードしたファイルを加工するスクリプト)
[php]
<?php
//前にアップロードされた写真のファイル名
$postPhotoName = $_POST["postPhotoName"];
//古いファイルの削除
if($postPhotoName){
unlink("./img/".$postPhotoName);
unlink("./img/thumb-".$postPhotoName);
}
$result = false;
if($_FILES[‘img’][‘name’] == "") {
die("ファイルがないぜよ。");
}else{
//アップロードされたファイルの情報を取得
$fileName = basename(date("U")."-".$_FILES[‘img’][‘name’]);
$fileType = $_FILES[‘img’][‘type’];
$fileTmpName = $_FILES[‘img’][‘tmp_name’];
if(!preg_match("/jpeg/",$fileType)){
unlink($fileTmpName);
die( "jpegじゃないぜよ。");
}else{
//ファイルの保存
if (!move_uploaded_file($fileTmpName, ‘./img/’ . $fileName)) {
die(‘保存にしっぱいしたぜよ。’);
} else {
//サムネイル作成
include(‘class.image.php’);
list($width, $height, $type, $attr) = getimagesize(‘img/’.$fileName);
$thumb = new Image(‘img/’.$fileName);
$thumb->name(‘thumb-‘.basename($fileName,".jpg"));
if($width>$height){
if($width > 500) $thumb->width(500);
}else{
if($height > 500) $thumb->height(500);
}
$thumb->save();
$result = true;
}
}
}
if($result == true){
?>
<img src="<?php echo ‘./img/thumb-‘.$fileName;?>">
<input type="hidden" value="<?php echo $fileName?>" name="postPhotoName" id="postPhotoName">
<?php
}
[/php]
HTML
[html]
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" value="" id="img" name="img" size="50" />
<input type="submit" id="submit" />
<div id="preview"><div>ここにプレビューが表示されます</div></div>
</form>
[/html]
このままつかうのはちょっとあれかもですけど、アイデア次第で色々使い道がありそうです。
