`<input type="file">`をBootstrapのデザインに簡単に合わせる(要JQUERY)

自分の知っているlabelを利用した方法とJqを利用したファイル名の表示をコラボしてみました

html

<label for="InputFile" class="btn btn-default">ファイル選択
<input class="hide" type="file" id="InputFile" onchange="$('#file_name').text($(this).val())"/>
</label>
<span id="file_name"></span>
<input class="btn btn-primary" type="submit" name="submit" value="送信" id="Submit">

Bootstrapのデザインクラスに対応していない <input type=file...> に

　　　　　　　　　⇓
　　　　　　　　　⇓
こんな感じでデザインを充てられますし、CSSで自由にデザインできます。

参照
http://qiita.com/yasumodev/items/c9f8e8f588ded6b179c9
http://qiita.com/shimayu/items/605ecac3eeec50dd4f93