input type="file" のボタンをオリジナルのボタンにする。

#概要
Bootstrapを使うとボタン類は綺麗に装飾されますが、ファイル選択のボタンってCSSでは装飾出来ません。
そこでjqueryを使えば擬似的に好きな画像やbutton要素をファイル選択ボタン代わりに使うことが出来るようになります。

なお、jqueryを使用しているのでjqueryは読み込んでいる前提です。

##ソース

HTML

<input type="file" id="file" style="display:none;" onchange="$('#fake_input_file').val($(this).val())">
<input type="button" value="ファイル選択" onClick="$('#file').click();">
<input id="fake_input_file" readonly type="text" value=""  onClick="$('#file').click();">
<input type="submit" name="submit" value="送信" id="Submit">

##解説

HTML1

<input type="file" id="file" style="display:none;" onchange="$('#fake_input_file').val($(this).val())">

この部分が本来のファイル選択ボタンになります。ここを非表示にします。
display:noneは非表示になっているだけで機能を無効化してるわけではありません。

HTML2

<input type="button" value="ファイル選択" onClick="$('#file').click();">

ここが擬似的にファイル選択ボタンの役目を果たしている部分。
ここではわかりやすいようにinputを使ってますが、imgで好きな画像を表示させてもbuttonタグを使ってもOKです。

onClick="$('#file').click();" ここがポイント。
この要素をクリックした時に、非表示にしているHTML1に対してclickイベントを発生させています。
つまり、ここをクリックすればHTML1のボタンもクリックしたことになり、ファイル選択のダイアログが表示されるようになります。

ただ、これだけだとどのファイルを選択したのかがわからないのでファイル名を表示させるためのテキストボックスを用意します。

HTML3

<input id="fake_input_file" readonly type="text" value=""  onClick="$('#file').click();">

readonly属性を付けてユーザーが変更出来ないようにします。
HTML1のonchangeによって、この値が変化した際にHTML3のvalue部分が変更されるようにしました。

HTML3のonclickのところはHTML2と同じで、テキストボックスをクリックした時もファイル選択のダイアログを表示させるようにしました。

これでHTML2の部分をCSSで装飾してあげればオリジナルボタンの完成です。