jQuery.autouploader Pluginを作成しました。

AutoHotKeyの設定ファイルが意味不明で困ってます。agoです。

このたび弊社ではにおい部 - においフェチに捧げるコミュニティとして、におい部をOPENしました。

今回はこのサイトで使用している、ファイル選択時の自動プレビューjavascriptをjQuery.autouploaderとしてjQuery Plugin化したので公開したいと思います。

使い方はjQueryと一緒にpluginを読み込むだけ。

<script type="text/javascript"jquery.autouploader.js"></script>

これで<form enctype="multipart/form-data">の中にある、<input type="file">に対して自動的にプレビュー機能が追加されます。

サーバサイドはアップロードされたファイルを保存し、そのURIを返すAPIを作成すれば完成です。

(実際submitした場合は通常通りフォーム全体の値が送られるため、APIを用意してscript tagを追加すれば既存のフォームへの容易に追加できます)

指定できるパラメータと初期値は以下の通りです。

(今回はできるだけ「読み込めば使える」を基本に作成したため、パラメータの指定はscript src経由で指定することを想定しています)

<script type="text/javascript"jquery.autouploader.js#api=/api/uri&send_name=img&loading=/loading/img.gif"></script>
/*
    サーバ上で画像を保存するAPIのURI。
    クロスドメインの制約を受けるため、同じドメイン内を指定する。
    (window.nameを使えばクロスドメインの制約も回避可能ですが、今回は必要なかったため実装していません)
    初期値 /api/image/set
*/
api=/api/image/set
/*
    APIへ送信する画像ファイルのパラメータ名。
    <input type="file">のname="name"によらず、必ずこの名前で送信される。
    初期値 'img'
*/
send_name=img
/*
    アップロード中のローディング画像URI。
    外部ドメインも指定可能。
    指定がない場合、タグ自体を出力しない。
    初期値 ''
*/
loading=
/*
    プレビュー機能を自動的に有効化しない。
    trueが指定された場合、formに対して自動的にプレビュー機能を追加しない。
    何も指定されない(初期値)場合、初期化の最後で自動的に以下のコードが実行される。
    $(function () { $('form[enctype="multipart/form-data"]').autouploader(); });
    初期値 ''
*/
no_exec=

(APIの返り値は正規表現で抽出しているため、ファイル名のみ、JSON、XML等でも大体正常に取得できると思います)

また、Draggable.jsjQuery.draggableのいずれかが同時に読み込まれている場合、プレビュー画像がマウスで移動できるようになります。

他に細かい点として、<input type="file">がフォーム中に複数個存在する場合でもプレビュー用に送信するファイルはひとつだけ(そのつどフォーム全体を送信しない)、選択されたファイルパスを空にするボタンの追加(FF3では一度ファイルを選択すると<input type="file">の値を削除できないため)といった機能も実装しています。

Plugin自体はMIT、GPLのDual license、公開場所はCodeReposを使用させていただいているので、興味のある方はご自由に組み込み、修正を行ってください。

ちなみに、似たような機能をもったpluginはすでに存在していますが、100行程度だったので再実装してしまいました。

例によって以下のリンクをクリックすることで一時的にお試しいただくことが可能です。(ただし、サーバ側のAPIは用意していないため、画像は固定的なものを返しています)

jQuery.autouploader有効化

カヤックではUIの改善に興味のある方や、既存環境へ容易に追加できる技術を開発するのが得意な技術者を募集しています!