(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; }