# jQuery.uploadでアップロード画像のサムネイルの作成

- リンク: https://torounit.com/blog/jquery-upload%e3%81%a7%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%81%ae%e4%bd%9c%e6%88%90/
- 公開日: 2011-05-18T11:46:19+09:00
- 作成者: Toro\_Unit

Ajaxを使ったメールフォームとかってやっぱり素敵ですよね。
 以前仕事で写真投稿付き
のフォームを作らざるを得なかったので、どうせならということでAjax化しました。 という
わけで[jQuery.upload](http://lagoscript.org/jquery/upload?locale=ja)を使って写真
をアップロードして、サムネイルを表示するチュートリアルです。

2011-12-03追記:デモ作りました。[jQuery.uploadを使ったフォームのデモを作りました。](https://torounit.com/blog/2011/12/02/1040/)

# コード

  html  [html]
 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <
title>upload form</title> <script type="text/javascript" src="jquery.min.js"></script
> <script type="text/javascript" src="jquery.upload-1.0.2.min.js"></script> <script
type="text/javascript" src="script.js"></script> </head> <body>

<form method="post" enctype="multipart/form-data" action="upload.php">
 <input type
="file" value="" id="img" name="img"> <input type="submit" id="submit" value="送信"
> <div id="preview">ここにプレビューが表示されます</div> </form>

</body>
 </html> [/html]

 script.js  [js]
 jQuery(function($){

$(‘#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’); });

});
 [/js]

 upload.php  [php]
 <?php

//前にアップロードされた写真のファイル名
 $postPhotoName = $_POST["postPhotoName"];

//古いファイルの削除
 if($postPhotoName){

 unlink("./img/".$postPhotoName);
 unlink("./img/thumb-".$postPhotoName); }

//アップロードされたファイルの情報を取得
 $fileName = basename(date("U")."-".$_FILES[‘
img’][‘name’]); $fileType = $_FILES[‘img’][‘type’]; $fileTmpName = $_FILES[‘img’][‘
tmp_name’];

$result = false;
 if(preg_match("/jpeg/",$fileType)){ if (move_uploaded_file($fileTmpName,‘./
img/’ . $fileName)) { 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 > 200) $thumb->width(200); }else{ if($height > 200) $thumb->height(200);}
$thumb->save(); $result = true; } else { echo ‘保存にしっぱいしたぜよ。’; }

}else{
 unlink($fileTmpName); echo "jpegじゃないぜよ。"; }

if($result == true){
 ?> <img src="<?php echo ‘./img/thumb-‘.$fileName;?>"> <input
type="hidden" value="<?php echo $fileName?>" name="postPhotoName" id="postPhotoName"
> <?php } [/php]

# 概要

HTMLには特に特別なことはしていません。ただ、js無効のユーザーの為に、
 [html] <form
enctype="multipart/form-data"> [/html] とします。

jsですが、7行目でアップロードの方をやっています。
 [js] $("hoge").upload([データ
を受け取るCGIとかPHPのパス],[データ],[コールバック]); [/js] として使います。 また、
コールバック関数の引数で、通信をしたサーバー側のスクリプトのHTMLを取得が出来ます。
なので、今回の場合、upload.phpで送信されたファイルをサムネイルに加工したものを表示
出来れば良いわけです。

phpは、受け取った画像データをGDでサムネイルに加工しているだけです。class.image.php
を使っています。また、写真用なので、jpeg以外弾くようにしています。

PHPSPOT開発日誌に[PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」](http://phpspot.org/blog/archives/2008/02/phpclassimageph.html)
という記事が載っているのでそちらを参照ください。

また、このままだと、サーバーにファイルが溜まりっぱなしになるので、
 [php] <input
type="hidden" value="<?php echo $fileName?>" name="postPhotoName" id="postPhotoName"
> [/php] を結果を返すときに一緒に返します。そして、また違うものがアップロードされ
たときには、ここの値を使って、サーバー上のファイルを削除します。それでもアップロード
した後に”戻る”とかをされてしまうとサーバーに残ってしまうので、定期的にcronで削除
するようにしてたりします。

これをさらにPHPMailer等に投げて、写真投稿つきのメールフォームにしています。

他にもいくつかjQueryでファイルのアップロードができるjsは[jQuery File Upload](http://aquantum-demo.appspot.com/file-upload)
等いくつかあるので、また触ってみたいですね。