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

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

2011-12-03追記:デモ作りました。jQuery.uploadを使ったフォームのデモを作りました。

コード

html
script.js
upload.php

概要

HTMLには特に特別なことはしていません。ただ、js無効のユーザーの為に、

とします。

jsですが、7行目でアップロードの方をやっています。

として使います。
また、コールバック関数の引数で、通信をしたサーバー側のスクリプトのHTMLを取得が出来ます。
なので、今回の場合、upload.phpで送信されたファイルをサムネイルに加工したものを表示出来れば良いわけです。

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

PHPSPOT開発日誌にPHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」という記事が載っているのでそちらを参照ください。

また、このままだと、サーバーにファイルが溜まりっぱなしになるので、

を結果を返すときに一緒に返します。そして、また違うものがアップロードされたときには、ここの値を使って、サーバー上のファイルを削除します。それでもアップロードした後に”戻る”とかをされてしまうとサーバーに残ってしまうので、定期的にcronで削除するようにしてたりします。

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

他にもいくつかjQueryでファイルのアップロードができるjsはjQuery File Upload等いくつかあるので、また触ってみたいですね。