こんにちは、okutani(@okutani_t)です。Bootstrapデフォルトのinput fileはなんだかダサいです。なぜもっとBootstrap感をダサなかったのか……！
ということでBootstrapっぽく変えてみました。プラグインとか何も使わないので、気軽に試せるかと思います。参考にしてください。
参考Pretty file input field in Bootstrap | duckranger.com
スポンサーリンク
Bootstrapのfileフォームを装飾する
まず最初にデフォルトのfileアップロードフォームを確認してみましょう。
下記HTMLコードで確認できます。
<div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">● 〇〇MBまでの画像をアップロードできるよ！</p> </div>
表示確認
ださいです。
次にBootstrapっぽく装飾したフォーム。
<input id="lefile" type="file" style="display:none">
<div class="input-group">
<input type="text" id="photoCover" class="form-control" placeholder="select file...">
<span class="input-group-btn"><button type="button" class="btn btn-info" onclick="$('input[id=lefile]').click();">Browse</button></span>
</div>
<p class="help-block">● 〇〇MBまでの画像をアップロードできるよ！</p>
<script>
$('input[id=lefile]').change(function() {
$('#photoCover').val($(this).val());
});
</script>
表示確認
Bootstrap感が出ましたね。
かんたんに解説します。
実際のfileアップロード部分は「display:none」で非表示に。Browseがクリックされた時に、JavaScriptで非表示にしたフォームに値を渡しています。
また、Browseの部分を次のコードに置き換えると、ボタンをアイコンに変更できます。
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
ファイル添付時、下記のように「C:\fakepath\〜」と出る場合があります。
上記のfakepathの記述を取り除きたい場合、JavaScriptの記述を次のように書き換えてあげればOKです。
$('#snap-img').change(function() {
$('#cover').html($(this).val().replace("C:\\fakepath\\", ""));
});
fakepathの記述が取り除かれました。
参考にしてください。