画像プレビューjQueryプラグイン

画像をupload前にプレビュー出来るjQueryプラグインです。
サーバへ画像データを送信する前に、ブラウザ側(Javascript)でファイルをチェックできるため、非常にスピーディーです。
送信ボタンを押してアップロードが終わってやっと確認、という時間も手間を省く事が出来ます。

jQueryプラグイン作成を学ぶために作った習作です。実用的ではないかもしれませんが、参考になれば幸いです。

動作サンプル

シンプルな例

ファイルサイズ1MBまで許可、jpeg と PNG のみ許可する

上記サンプルの設置例

<script src="jquery.upimage.js"></script>

シンプルな例。
<input type="file" id="upimage1">
<img src="noimage80px.jpg" id="preview1" width="80">
<script>$("#upimage1").upimageview('#preview1');</script>

ファイルサイズ1MBまで許可、jpeg と PNG のみ許可する。
<input type="file" id="upimage2" accept="image/jpeg,image/png" accept_msg="jpegとPNGのみアップできます。" maxsize="1024000" maxsize_msg="1MB以内のファイルを指定してください。">
<img src="noimage80px.jpg" id="preview2" width="80">
<script>$("#upimage2").upimageview('#preview2');></script>

ダウンロード

jquery.upimage.js

※上記リンクを右クリック「保存」でダウンロードしてください

関連リンク