画像やリンクをクリックしてファイル選択できるようにするjQueryプラグインをつくった

通常、fileタイプのinput要素をクリックしたときのみファイルを選択することができますが、
画像や文字をクリックしたときにもファイル選択ダイアログを表示し、ファイルをアップロードできるようにします。

簡単にいうと、AjaxUploadのファイル選択部分と同様の処理をプラグイン化したもの。
要素の上に透明なinput要素を作成することで、擬似的にファイル選択を行います。

サンプル

画像や文字列・リンクなどの好きな要素を指定しfileメソッドをコール。
引数の一番目にinput要素のname属性の値、2番目にファイルが選択された際のコールバック関数を指定可能。
コールバック関数はEventオブジェクトとinput要素を引数にとります。

$('#id').file('name', function(event, input) {
    // ファイルが選択されたときの処理
    // event: Eventオブジェクト
    // input: Input要素

    alert($(input).val()); // ファイル名を表示
});

ソース

(function($) {
    $.fn.file = function(name, callback) {
        var self = this,
　　　　　　// 透明なinput要素を作成
            input = $('<input type="file" name="' + name + '" style="margin:-5px 0 0 -160px; padding:0; position:absolute; z-index:99999;"/>').css('opacity', 0);
            
        this.append(input).mouseenter(function(event) {
　　　　　　// input要素を対象要素の上に移動
            move(event.pageX, event.pageY);
　　　　　　// 表示（透明なまま）
            input.show();
        });

        input.mousemove(function(event) {
            var position =  self.position();

            move(event.pageX, event.pageY);

            if (event.pageY < position.top || 
                event.pageY > position.top + self.height() || 
                event.pageX < position.left ||
                event.pageX > position.left + self.width()) {
　　　　　　　　// マウスが対象要素から外れたら非表示
                $(this).hide();
            }
        }).change(function(event) {
            if (callback) {
　　　　　　　　// changeイベントのコールバック関数呼び出し
                callback.call(self.get(0), event, this);
            }
        });

        function move(x, y) {
            input.css({left:x, top:y});
        }
    };
})(jQuery);