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

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

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

“jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。” への7件のフィードバック

  1. kbc151のアバター
    kbc151

    画像1、画像2、画像3のように、それぞれの~からアップロードしたい場合は、どのように修正すれば宜しいでしょうか?宜しければ教えてください。

  2. @136のアバター
    @136

    問題なくアップロードできました。
    どこを、どう直したんですが?
    初心者ですいません。

    1. Toro_Unitのアバター

      data:    “postPhotoName=”+unlinkFile の後ろにカンマがついていたのですが、それを取りました。IE7以前だと、配列等の扱いが厳密なのでエラーになるようです。

  3. @136のアバター
    @136

    デモ画面で確認したところ、IE7だとステータスバーにスプリクトエラーが表示されて動作しませんでした。(IE8では問題なし)
    何か回避策はありますか?

    メッセージ内容
    ライン:36
    文字:3
    エラー:識別子、文字列または数がありません。
    コード:0
    URL:http://demo.torounit.com/jquery.upload/

    また、対応していないブラウザはありますか?

    1. Toro_Unitのアバター

      デモの方のスクリプトエラー修正しました。

      ブラウザですが、確認はしていませんが、IE6,7にも対応しているようです。

  4. やさしすのアバター

    興味深い記事でしたので読ませて頂きました。
    PHPの部分でclass.image.phpと言うファイルをインクルードされていますが
    この部分のソースなどは公開されていますでしょうか?

    お忙しい所申し訳ありませんがお時間が御座いましたらお返事頂きたいと思います

    1. Toro-Unitのアバター

      http://phpspot.org/blog/archives/2008/02/phpclassimageph.htmlで紹介されている、切り抜きとかリサイズが簡単にできるライブラリです。簡単に使えて便利ですよー。