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

以前、jQuery.uploadでアップロード画像のサムネイルの作成というエントリーを書いたので、それの実装を作ってみました。アップロードする画像を選択すると、アップロードされ、それのサムネイルが表示されます。

また、ページを離れるときに画像をJavascriptで削除していますが、実際に使うときは使わない場面も多いと思いますので、その部分は適当に削除するなり、なんなりして下さい。

デモ:http://demo.torounit.com/jquery.upload/

script.js(ajaxでのアップロード等々)

upload.php(アップロードしたファイルを加工するスクリプト)

HTML

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

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

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

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

  • @136

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

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

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

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

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

  • @136

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

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

  • kbc151

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