Bootstrapのfileアップロードフォームがダサいから装飾してみた
2017/01/31
こんにちは、okutani(@okutani_t)です。Bootstrapデフォルトのinput fileはなんだかダサいです。なぜもっとBootstrap感をダサなかったのか……！
ということでBootstrapっぽく変えてみました。プラグインとか何も使わないので、気軽に試せるかと思います。参考にしてください。
スポンサーリンク
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です。
$('input[id=lefile]').change(function() {
$('#photoCover').val($(this).val().replace("C:\\fakepath\\", ""));
});
fakepathの記述が取り除かれました。
参考にしてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
