jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。

執筆者:

Toro_Unit

カテゴリ:

jQuery, PHP

以前、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]

このままつかうのはちょっとあれかもですけど、アイデア次第で色々使い道がありそうです。