カスタムフィールドテンプレートのファイルアップロードボタンをCSSで装飾する

(1)カスタムフィールドテンプレートの設定

テンプレートコンテンツ:を以下のように設定します。

[sample_img]
label = サンプル画像
type = file
before = <div class=fileuploadbtn>画像を選択
after = </div>

テンプレートインストラクション:を以下のように設定します。

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery('.fileuploadbtn').after('<span class="this"></span>');
  jQuery('input[type=file]').on("change", function() {
    var file = this.files[0];
    jQuery('span.this').html(file.name);
  });
});
</script>

(2)CSSの設定

.dl_file .fileuploadbtn {
  background: #666;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  line-height: 23px;
  margin-left: 0;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 180px;
}
.dl_file .fileuploadbtn:hover {
  background: #999;
}
.dl_file .fileuploadbtn input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.dl_file .this {
  display: block;
}

参考:input[type=file]をCSSで加工する

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様